Placing second column on top when page is resized - html

Question

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 with 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 column class is it possible to put the second column on the top?
With code above the second column goes on the bottom. I can't interchange the content of the columns as I want first column to be on the left on the bigger screen.
Thanks in advance!

Answer 1

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>

Answer 2

you can do something like this if you don't want use bs4 or don't know how to use display:flex.
don't forget to change the class names as you want
.row-2 {
direction: rtl;
}
.row-2 .col {
direction: ltr !important;
border: 1px solid #eee;
background: #fefefe;
padding: 1rem;
}
.row-2 .col-md-offset-2{
margin-left: 0;
margin-right: 16.66666667%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-2">
<div class="col col-md-4 col-sm-12 col-md-offset-2">
<img class="img-responsive header-notebookImg" src="https://artbees-themes-artbees1.netdna-ssl.com/wp-content/uploads/2018/10/jupiter-x-bootstrap-logo.jpg" alt="">
</div>
<div class="col col-md-4 col-sm-12 body-slogan">
<p class="body-slogan"> Save<span class="body-slogan-word">your</span> ideas with this application</p>
</div>
</div>

Answer 3

I see many custom css classes here, bootstrap has built-in css classes for that, no need to write custom ones.
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>