0

So, for below code, in the mobile site, or device-width less than 768px. I still want to show IMG first, then, description. How should I display the img first, then description in the SECOND row?

Can I have such effects only by manipulating CSS or I need to go through some JS? 

<div class="row">

    <div class="col-md-8 col-xs-12">
        <img src="#"/>
    </div>

    <div class="col-md-4 col-xs-12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. </div>

</div>

<div class="row">
    <div class="col-md-4 col-xs-12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. </div>

    <div class="col-md-8 col-xs-12">
        <img src="#"/>
    </div>
</div>
Yumiko
  • 448
  • 5
  • 16
  • 1
    As a thumb rule, think as *mobile-first* then consider using `.col-*-push-#`/`.col-*-pull-#` classes in larger screens. You might find this helpful: http://stackoverflow.com/questions/25714852/change-the-order-of-col-12-columns-in-bootstrap-3-by-using-push-pull – Hashem Qolami Nov 24 '14 at 09:01
  • 1
    Nitpick: You don't really need to apply `col-xs-12` class. Bootstrap will automatically do that for you. – Abhitalks Nov 24 '14 at 09:01
  • I actually try to do it by modifying their margin-top and margin-bottom to flip the position. What are you opinion? – Yumiko Nov 24 '14 at 09:05

2 Answers2

1

The first element in HTML will be positioned by the browser , and only after that has occurred with the second element be positioned. This is called the "flow" of positioning. Here is a good tutorial.

In your example, our attention needs to be on the description to begin with, since it is first in the flow. We need to tell the description to be positioned much lower than it would otherwise have been (to reserve space for the img).

Is there no way you can update your HTML, to apply some semantic classes? With your example, there's no CSS selector (that I know) which can distinguish between these two rows properly. If you can provide some more classes in the HTML, you could try something like this, but you'd need to know the size of your image in advance (here it's 200px):

(EDIT: this solution only needs to know the size of the image in advance, not the size of the paragraph)

body > div.row:nth-of-type(even) {
    position: relative;
    height: 200px;
}

body > div.row:nth-of-type(even) > div.col-md-4.col-xs-12 {
    position: absolute;
    bottom: 0;
    background-color: yellow;
}

body > div.row:nth-of-type(even) > div.col-md-8.col-xs-12 > img {
    position absolute;
    top: 0;
}

Otherwise, it's JavaScript for you. Which is fun.

body > div.row:nth-of-type(even) {
  position: relative;
  height: 200px;
}
body > div.row:nth-of-type(even) > div.col-md-4.col-xs-12 {
  position: absolute;
  bottom: 0;
  background-color: yellow;
}
body > div.row:nth-of-type(even) > div.col-md-8.col-xs-12 > img {
  position absolute;
  top: 0;
}
<div class="row">

  <div class="col-md-8 col-xs-12">
    <img src="#" />
  </div>

  <div class="col-md-4 col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

</div>

<div class="row">
  <div class="col-md-4 col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

  <div class="col-md-8 col-xs-12">
    <img src="#" />
  </div>
</div>
cobberboy
  • 5,598
  • 2
  • 25
  • 22
0

Try adding the div wich conntains the image on top of the div which contains the description

      <div class="row">

          <div class="col-md-8 col-xs-12">
              <img src="http://placehold.it/300x300"/>
          </div>

          <div class="col-md-4 col-xs-12"> Lorem ipsum dolor sit amet, consectetur    adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. </div>

    </div>

  <div class="row">
    <div class="col-md-8 col-xs-12">
       <img src="http://placehold.it/300x300"/>
    </div>

    <div class="col-md-4 col-xs-12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. 
     </div>

valeriu turcanu
  • 9
  • 1
  • 3