Change order elements with CSS in responsive mode [closed]

问题

Figure 1 is the desktop mode; two images and text below, total three divs.

Figure 2 is how I want it to display in a mobile browser such as a phone.

Any idea on how to make this happen?

I am open to any suggestions. The idea is for the text to show above the images to best illustrate the description of the two images. Placing the text on top in the desktop version is not an option.

回答1:

You could achieve this by using CSS @media queries and flex order like this:

JSFiddle - DEMO

HTML:

<div class="div-1">
    <div class="div div-2">image 1</div>
    <div class="div div-3">image 2</div>
    <div class="text">my text</div>
</div>

CSS:

.div-1 {
    width: 100%;
    text-align: center;
}
.div {
    display: inline-block;
    width: 300px;
    height: 200px;
    background: #EEE;
    margin: 10px;
}
@media (max-width: 660px) {
    .div-1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .div-2 {
        order: 2;
    }
    .div-3 {
        order: 3;
    }
    .text {
        width: 100%;
        order: 1;
    }
}

回答2:

CSS Flexbox allows you to change the order of elements without changing the HTML markup. So:

Order the elements for desktop
Then use media queries and flex display to change the order

/* DESKTOP CSS */

#image1,
#image2 {
  display: inline-block;
  width: 5em;
  height: 5em;
  background-color: #CCC;
}

/* MOBILE CSS */

@media only screen and (max-width: 700px) {
  #wrapper {
    display: flex;
    flex-direction: column;
  }
  #caption {
    order: 1;
  }
  #image1 {
    display: block;
    order: 2;
  }
  #image2 {
    display: block;
    order: 3;
  }
}

<div id="wrapper">
  <div id="image1">Image 1</div>
  <div id="image2">Image 2</div>
  <div id="caption">Caption</div>
</div>

Click "full page" button to view desktop version.

来源：https://stackoverflow.com/questions/26255240/change-order-elements-with-css-in-responsive-mode

标签

html

css

html5

css3

responsive-design