Dfyjkt

I am trying to make a responsive design on the page using bootstrap grid. Here is my HTML:

<div class="row row-2">
 <div class = "col-sm-4 col-sm-offset-2">
 <img class="img-responsive header-notebookImg" src="Images/header/notebook.png" alt="">
 </div>
 <div class="col-sm-4 body-slogan">
 <p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas whth this application</p>
 </div>
 </div>

The css file only contains fonts and sizes. My question is: When I resize the page to trigger bootstrap extra small coloumn class is it possible to put the second coloumn on the top?

With code above the second coloumn goes on the bottom. I can't interchange the content of the coloumns as I want first coloumn to be on the left on the bigger screan.
Thanks in advance!

If you're using Bootstrap 4 it's pretty simple with flex-direction: column-reverse;.

Here's a simple example with Bootstrap 4. Just wrap the row's into a container with display: flex; and give it a flex-direction: column-reverse;`.

.row 
 background: #f8f9fa;
 margin-top: 20px;


.reverse 
 display: flex;
 flex-direction: column-reverse;


.col 
 border: solid 1px #6c757d;
 padding: 10px;


/* Desktop View */
@media (min-width: 1281px) 
 
 .reverse 
 flex-direction: column;
 
 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="reverse">
 <div class="row">
 <div class="col">
 Row 1
 </div>
 </div>
 <div class="row">
 <div class="col">
 Row 2
 </div>
 </div> 
 </div>
</div>