CODEWITHSUNDEEP
csstwitter-bootstrap
Høgsdal
Høgsdal

Reputation: 395

Columns in Bootstrap

This is what I have at the moment on a on small devices.

enter image description here

This is the code for the image above.

<div class="row">
    <div class="col-sm-6">
        <div class="alert alert-info">Chart 1</div>
    </div>
    <div class="col-sm-6">
        <div class="alert alert-info">Chart 2</div>
    </div>
    <div class="col-sm-12">
        <div class="alert alert-danger">Legend</div>
    </div>
</div>

When this is shown on an extra small device the order is like this:

Chart 1
Chart 2
Legend

This is expected but not what I'm after. I want it to be like this:

Chart 1
Legend
Chart 2

Is this possible using Bootstrap?

Upvotes: 3

Views: 136

Answers (2)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10398

You can wrap blocks A and B in an additional block and increase the width of block B on a wide screen.

This solution works well if block C is not higher than block A. But you do not have to repeat block B twice.

https://codepen.io/glebkema/pen/YVVvVL

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

/* Heart of the matter */
@media (min-width: 768px ) {
  .col-sm-double-width {
    margin-right: -100%;
    width: 200%;
  }
}

/* Decorations */
.container {
  margin-top: 14px;
}
.col-a,
.col-b,
.col-c {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  min-height: 80px;
  padding-top: 6px; 
}
.col-a { background: #9c6; }
.col-b { background: #f93; }
.col-c { background: #69c; }
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="row">
        <div class="col-xs-12 col-a">A</div>
        <div class="col-xs-12 col-b col-sm-double-width">B</div>
      </div>
    </div>
    <div class="col-sm-6 col-c">C</div>
  </div>
</div>

Upvotes: 1

J. Shabu
J. Shabu

Reputation: 1053

Here is your fixed code

<div class="row">
    <div class="col-sm-6">
        <div class="alert alert-info">Chart 1</div>
    </div>
     <div class="visible-sm visible-xs hidden-md hidden-lg">
         <div class="col-sm-12">
        <div class="alert alert-danger">Legend</div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="alert alert-info">Chart 2</div>
    </div>
    <div class="hidden-sm hidden-xs visible-md visible-lg">
    <div class="col-sm-12">
        <div class="alert alert-danger">Legend</div>
    </div>
    </div>
</div>

Cheers !

Upvotes: 2

Related Questions