Reorder columns responsively within one row

Question

How can I reorder columns responsively within one row? I have one page website with 5 sections, each of them has 100% width and height of the screen size.

What I have on desktop in my first section (A and C contains images as background-image, B is div with h1 element):

 ----------------------------------------
|          |                  |          |
|          |                  |          |
|    A     |        B         |     C    |
| col-lg-3 |     col-lg-6     | col-lg-3 |
|          |                  |          |
|          |                  |          |
 ----------------------------------------

What I want to have on small screens (smartphones):

 -------------
|             |
|      B      |
|             |
 -------------
|      |      |
|      |      |
|   A  |   C  |
|      |      |
|      |      |
 -------------

I tried to use bootstrap's push and pull classes, but they broke my one-page-layout and I want to keep A, B and C within one fullscreen section. Any help appreciated :) Many thanks!

Edit:

Here is some of my HTML:

<div class="row section first">
  <div class="col-sm-12 col-lg-6" id="B"><h1>Header</h1></div>
  <div class="col-sm-6 col-lg-3 col-lg-pull-6" id="A"></div>
  <div class="col-sm-6 col-lg-3" id="C"></div>
</div>

<div class="row section second">
  <div>second section content...</div>
</div>

...and my CSS snippets:

body {
  width: 100vw;
}

.section {
  height: 100vh;
}

#B h1 {
  font-family   : 'Lobster', Impact;
  font-weight   : 400;
  font-size     : 8vw;
  letter-spacing: -4px;
  position      : relative;
  top           : 30%;
  color         : #66678B;
  margin-top    : 300px;
  text-shadow   : 5px 5px rgb(226, 226, 233);
}

div#A {
  background         : url('./img/A.png') no-repeat;
  background-size    : contain;
  background-position: bottom center;
  height             : 100%;
  margin-top         : 25px;
  margin-right       : -75px;
  padding-top        : 5px;
}

div#C {
  background         : url('./img/C.png') no-repeat;
  background-size    : contain;
  background-position: bottom center;
  height             : 100%;
  margin-top         : 25px;
  margin-left        : -75px;
  padding-top        : 5px;
}

Answer 1

To design this layout, you may try to use mobile-first methodology. That is to say, first design the layout in small screen, then the larger with the help of 'pull' and 'push' classes.

In this case, first for the second layout:

<div class="row">
  <div class="col-sm-12"> B </div>
  <div class="col-sm-6"> A </div>
  <div class="col-sm-6"> C </div>
</div>

Then modify it to fit the first layout:

<div class="row">
  <div class="col-sm-12 col-lg-6"> B </div>
  <div class="col-sm-6 col-lg-3 col-lg-pull-6"> A </div>
  <div class="col-sm-6 col-lg-3"> C </div>
</div>

Answer 2

<div class="container">
  <div class="row">
    <div class="b col-sm-12 col-lg-6 col-lg-push-3">B</div>
    <div class="a col-sm-6 col-lg-3 col-lg-pull-6">A</div>
    <div class="c col-sm-6 col-lg-3">C</div>
  </div>
</div>

fiddle.

a, b and c within the div class are not necessary and used only for demo purposes.

Answer 3

flexbox can do that

* {
  box-sizing: border-box;
}
.container {
  width: 50%;
  margin: 10px auto;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.a,
.b,
.c {
  height: 50px;
  border: 1px solid grey;
  order: 1;
  line-height: 50px;
}
.b {
  flex-grow: 2;
  /* twice as wide */
  flex-basis: 100%;
  background: lightblue;
  order: 0;
  /* move the element to first in line */
}
.a,
.c {
  flex-basis: 50%;
  background: red;
  flex-grow: 0;
}
.c {
  background: lightgreen;
}
@media screen and (min-width: 600px) {
  .container {
    flex-direction: row;
    flex-flow: nowrap;
  }
  .a,
  .b,
  .c {
    flex: 1;
    flex-grow: 1;
    order: 1;
  }
}

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

JSfiddle Demo