CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Moriz Büsing
Moriz Büsing

Reputation: 367

Force Bootstrap col below other column in 2 column layout

This is my code:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A   
        </div>
        <div class="col-md-6">
            B     
        </div>
        <div class="col-md-6">
            C     
        </div>
    </div>
</div>

Filled with actual content it looks somewhat like this: http://www.bootply.com/JZj51T1G1E#

Without changing the HTML structure, is there a way to force B to display on the left, under A? C should still stay on the right side. I tried using pull-6, but that causes it to display over A.

Upvotes: 0

Views: 1820

Answers (4)

Oli
Oli

Reputation: 2452

In bootstrap 5 you can set the vertical order using Order.

For example, this column will place on top in a small/mobile layout, but align on the right after other columns when the screen-size grows:

<div class="col-md-8 order-first order-sm-last">

Upvotes: 0

Chris Dobson
Chris Dobson

Reputation: 150

Add clear:left to the CSS of your second div. This, however, won't change the fact that C is also below A.

HTML

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A   
        </div>
        <div class="col-md-6 second-col">
            B     
        </div>
        <div class="col-md-6">
            C     
        </div>
    </div>
</div>

CSS

.second-col{
    clear:left;
  }

Upvotes: 1

m4n0
m4n0

Reputation: 32255

If you can't change the markup, you can rearrange it using flexbox

Use the CSS3 Prefixer to support slightly old browsers. Output in full screen.

.col-md-6:nth-child(1) {
  background-color: #f00;
}
.col-md-6:nth-child(2) {
  background-color: #ff0;
}
.col-md-6:nth-child(3) {
  background-color: #f0f;
}
@media (min-width: 992px) {
  .row {
    display: flex;
    flex-flow: row wrap; 
  }
  .col-md-6:nth-child(2) {
    order: 3;
  }
  .col-md-6:nth-child(3) {
    order: 2;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
      <br>A
    </div>
    <div class="col-md-6">
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
      <br>B
    </div>
    <div class="col-md-6">
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
      <br>C
    </div>
  </div>
</div>

Upvotes: 2

user4724925
user4724925

Reputation:

You are wrapping more than 12 cols per row. Please wrap 12 or less cols per row like this:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            A   
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            B     
        </div>
        <div class="col-md-6">
            C     
        </div>
    </div>
</div>

The above code structure is the correct way of adding columns in bootstrap and it also moves B to the left below A as you wanted.

Upvotes: 1

Related Questions