mjpramos mjpramos - 4 months ago 48
CSS Question

Bootstrap 3 complex layout

Haven't found any complex layout question like this one, so here goes.

Question 1 - I need my layout to be like:

+----------------------------------------+ +--------------------+
| | | |
| | | 2 |
| | +--------------------+
| |
| | +--------------------+
| | | |
| | | |
| 1 | | |
| | | 3 |
| | | |
| | | |
| | +--------------------+
| |
| | +--------------------+
| | | |
| | | |
| | | 4 |
+----------------------------------------+ | |
| |
+----------------------------------------+ | |
| | | +--------------------+
| 5 | 6 |
| | | +--------------------+
+----------------------------------------+ | |
| 7 |
+--------------------+


And when viewed on smaller screens have block 3 and 4, 5 and 6 spread on 2 columns, not stacked and block 5 and 6 at the very bottom like:

+----------------------------------------+
| |
| |
| |
| |
| |
| |
| |
| 1 |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------+
+----------------------------------------+
| |
| 2 |
| |
+----------------------------------------+
+----------------------------------------+
| | |
| | |
| | |
| 3 | 4 |
| | |
| | |
+----------------------------------------+
+----------------------------------------+
| |
| 7 |
| |
+----------------------------------------+
+----------------------------------------+
| | |
| 5 | 6 |
| | |
+----------------------------------------+


Question 2: I need some long text to be written on top of block 3 and 4, so I tried applying the images to the DIV's background. So they loose their responsivness (hardcoded with or didden image inside div). Any elegant way of achieving this?

Here's a JSFiddle, and the relevant HTML code:

<div class="container">
<div class="row">
<div id="mainleft" class="col-lg-6 col-md-6 col-sm-6">
<img class="img-responsive" src="http://placehold.it/662x673?text=1">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6" style="background-color:#fff;">
<img class="img-responsive" src="http://placehold.it/474x94?text=5">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<img class="img-responsive" src="http://placehold.it/474x94?text=6">
</div>
</div>
</div>

<div id="mainright" class="col-lg-6 col-md-6 col-sm-6">
<div id="right1"><img src="http://placehold.it/334x57?text=2" style="visibility: hidden;" /></div>
<div id="right2"><div class="txtoverimg2"><img src="http://placehold.it/334x347?text=3" style="visibility: hidden;" /><span class="txtover2 img-responsive">A long long text, a long long text, a long long text, a long long text, a long long text, a long long text</span></div></div>
<div id="right3"><div class="txtoverimg2"><img src="http://placehold.it/334x344?text=4" style="visibility: hidden;" /><span class="txtover2">A long long text, a long long text, a long long text, a long long text, a long long text, a long long text</span></div></div>
<img class="img-responsive" src="http://placehold.it/334x97?text=7" style="margin-top: 2px;/*border: 1px solid red;*/">
</div>
</div>
</div>

Answer

Layout

  1. Wrap blocks 2, 3, 4 and 7 into an additional block.
  2. Apply the float: right property to this block when the screen width becomes 786px or more. I've defined a new special class .pull-sm-right for this purpose.

layout

Please check the layout: https://jsfiddle.net/glebkema/eavcan0c/

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

@media (min-width: 768px) {
  .pull-sm-right {
    float: right !important;
  }
}

/* Decorations */
.col-sm-8:first-child              { background: #9c6; min-height: 300px; }
.col-xs-12                         { background: #ff0; min-height:  70px; }
.col-xs-6:nth-of-type(1)           { background: #f93; min-height: 100px; }
.col-xs-6:nth-of-type(2)           { background: #69c; min-height: 100px; }
.col-xs-6.col-sm-12:nth-of-type(2) { background: #69c; min-height: 150px; }
.col-xs-6.col-sm-12:nth-of-type(3) { background: #f93; min-height: 150px; }
.col-sm-8:first-child,
.col-xs-12,
.col-xs-6 {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  padding-top: 6px; 
}
<div class="container">
  <div class="row">
    <div class="col-sm-8">1</div>
    <div class="col-sm-4 pull-sm-right">
      <div class="row">
        <div class="col-xs-12">2</div>
        <div class="col-xs-6 col-sm-12">3</div>
        <div class="col-xs-6 col-sm-12">4</div>
        <div class="col-xs-12">7</div>
      </div>
    </div>
    <div class="col-sm-8">
      <div class="row">
        <div class="col-xs-6">5</div>
        <div class="col-xs-6">6</div>
      </div>
    </div>
  </div>
</div>

Comments