CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designbootstrap-4twitter-bootstrap-4
Mulan
Mulan

Reputation: 135377

How to split a column in a responsive view using Bootstrap?

I'm using Bootstrap v4 alpha4

Currently I have:

.row
  .col-xs-12.col-md-8
    div A
  .col-xs-12.col-md-4
    div B
    div C

For the xs layout, I'd like the div order to be:

Div B
Div A
Div C

I have no idea how to do this or how to even ask about it. I'm not a front-end dev so I don't know what things are called.

We can change the HTML to whatever we want. It does not have to stay like it is now.

enter image description here

Upvotes: 5

Views: 3952

Answers (4)

Olha Vadiasova
Olha Vadiasova

Reputation: 418

As promised, a simple draft

HTML

<div class="row">
   <div class="col1">DIV A</div>
   <div class="col2">DIV B</div>
   <div class="col3">DIV C</div>
</div>

CSS

    .row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  width: 400px;
  margin: 0 auto;
}

.col1 {
  width: 200px;
  height: 400px;
  background-color: #86a0ff;
}

.col2 {
  width: 150px;
  height: 150px;
  background-color: #ff6cde;
}

.col3 {
  margin-top: -200px;
  margin-left: auto;
  width: 150px;
  height: 150px;
  background-color: #35af6d;
}

@media (max-width: 768px) {
  .row {
    justify-content: center;
    flex-direction: column;
  }

  .col1 {
    order: 2;
    width: 200px;
    margin-top: 50px;
  }

  .col2 {
    order: 1;
    width: 200px;
  }

  .col3 {
    order: 3;
    width: 200px;
    margin-top: 50px;
    margin-left: 0;
  }
}

As for explanation, here is a great guide to flexbox. The main idea in my example is that by using order property you can manipulate the order in which blocks are displaying. The main plus of using flexbox is that you won't need to load any library(such as Bootstrap) to achieve the desired result, such as responsiveness. And it also has a good browser support, unless you need to support older versions of browsers. I hope my answer will be helpful for you!

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362700

Bootstrap does have column ordering classes, but in this case you can simply use the responsive float classes..

<div class="row">
    <div class="col-md-4 pull-md-right">
        b
    </div>
    <div class="col-md-8">
        a
    </div>
    <div class="col-md-4">
        c
    </div>
</div>

http://www.codeply.com/go/XL5zJELyLD

Upvotes: 5

Dinca Adrian
Dinca Adrian

Reputation: 1230

So using the classes from bootstrap and some general style you can achieve that like I did in this pen.

http://codepen.io/TunderScripts/pen/PGadpr

The Html:

<div class="row">
  <div class="col-xs-12 col-md-4 pull-right col1"></div>
  <div class="col-xs-12 col-md-8 pull-left col2"></div>
  <div class="col-xs-12 col-md-4 pull-right col3"></div>
</div>

the css: 

.col1{
  background: red;
  height: 200px;
}
.col2{
  background: blue;
  height: 600px;
}
.col3{
  background: green;
  height: 200px;
}

You can change the default behavior by using their classes for floats(pull-left, pull-right).

Upvotes: 4

Mr_Green
Mr_Green

Reputation: 41842

Instead of flexbox, I used combination of float and position css properties to get the expected result. Assuming large width as 150px and small width as 100px.

Working Fiddle

.container {
  width: 250px;
  position: relative;
}
.blue {
  width: 150px;
  height: 300px;
  background: blue;
  position: absolute;
}
.pink {
  width: 100px;
  height: 100px;
  background: pink;
  float: right;
}
.green {
  width: 100px;
  height: 100px;
  background: green;
  clear: right;
  float: right;
}
@media (max-width: 450px) {
  .blue {
    position: relative;
  }
  .green,
  .pink {
    float: none;
    width: 150px;
  }
}
<div class="container">

  <div class="pink"></div>
  <div class="blue"></div>
  <div class="green"></div>
</div>

Upvotes: 2

Related Questions