user2903379 user2903379 - 1 year ago 79
CSS Question

Image first in CSS with responsive

I'm using bootstrap 'featurette' feature. On the page there is a text on the left and image on the right. when you shrink the browser size, they go on top of each other, with the text at the top and the image at the bottom. How do I change this so that the image is frist and then the writing underneath?

Ad example is here

If you notice the feature part you will see what I mean when you resize.

I have tried changing the float position as thats the only thing I can think of but it didnt work.

P.s just to clarify, I still want them the same place when over 756px (or whatever the size is) but just want the image at the top when it changes size in the example above.

Answer Source

You should use display:flex property to the container for both and use order property for the elements for example is below. Try changing the order of the elements and have a look.

  background: #000;
  width: 100%;
  height: 500px;
  display: flex;
  order: 2;
  width: 200px;
  height: 200px;
  color: #ffffff;
  background: #ff0000;
  display: block;
  order: 1;
  width: 200px;
  height: 200px;
  display: block;
<div class="elements-container">
  <div class="text-box">This is text</div>
  <div class="image-box"><img src="" /></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download