Question

I want to be able to swap the position of two divs depending on the screen size. I have this JSfiddle.

HTML

<div class="divMain">
    <div class="div2">
    </div>
    <div class="div3">
    </div>
</div>

CSS

.divMain{
    height: 500px;
    width: 500px;
    border: 2px solid black;
}

.div2{
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 2px solid red;
}

.div3{
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 2px solid blue;
}

@media only screen and (max-width: 500px) {
    .div2{
        background-color: red;
    }

    .div3{
        background-color: blue;
    }
}
}

When the screen size is wider than 500px wide, i want div2 to be on the left and div3 to be on the right. Once the screen size reduces to 500px or smaller, i'd like div2 to be on the right and div3 to be on the left.

How would i go about this?

Help is much appreciated. Thanks

Answer 1

You can add a float left on your div 3

@media only screen and (max-width: 500px) {
    .div2{
        background-color: red;
    }

    .div3{
        background-color: blue;
        float:left;
    }
}

This pulls div 3 to the left of div 2

fiddle: https://jsfiddle.net/x0x2tu38/3/

Answer 2

It may be something of a hack, but a technique I find myself reaching for when I want an element to be be laid out in a different part of my HTML document depending on screen size – as opposed to just styled differently – is to just duplicate the element and then hide or show the two versions of the element using @media queries.

Using your example:

HTML

<div class="divMain">
  <div class="div2 visible-small"></div>
  <div class="div3"></div>
  <div class="div2 visible-large"></div>
</div>

CSS

.divMain{
  height: 500px;
  width: 500px;
  border: 2px solid black;
}

.div2{
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 2px solid red;
}

.div3{
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 2px solid blue;
}

@media only screen and (max-width: 500px) {
  .visible-large {
    display: none;
  }

  .div2{
    background-color: red;
  }

  .div3{
    background-color: blue;
  }
}

@media only screen and (min-width: 501px) {
  .visible-small {
    display: none;
  }
}

I can't speak to whether or not this has performance implications, but it certainly gets the job done. I prefer it mostly because it covers all cases – not just when the elements in question are right after one another in the HTML document – but also because I find the behavior of the css float property to be beyond the grasp of my simple mind.

I should also say that, if you're using Bootstrap, then helper classes that do this are built in! And it looks like Foundation has classes that do something similar.

Answer 3

Try to play with flexes:

display

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children:

.container {
  display: flex; /* or inline-flex */
}

flex-direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns:

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row (default): left to right in ltr; right to left in rtl
row-reverse: right to left in ltr; left to right in rtl
column: same as row but top to bottom
column-reverse: same as row-reverse but bottom to top

flex-wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.

.container{
flex-wrap: nowrap | wrap | wrap-reverse;

}

nowrap (default): single-line / left to right in ltr; right to left in rtl
wrap: multi-line / left to right in ltr; right to left in rtl
wrap-reverse: multi-line / right to left in ltr; left to right in rtl

justify-content

This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start (default): items are packed toward the start line
flex-end: items are packed toward to end line
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has it's own spacing that applies.

align-items

This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start: cross-start margin edge of the items is placed on the cross-start line
flex-end: cross-end margin edge of the items is placed on the cross-end line
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
stretch (default): stretch to fill the container (still respect min-width/max-width)

align-content

This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start: lines packed to the start of the container
flex-end: lines packed to the end of the container
center: lines packed to the center of the container
space-between: lines evenly distributed; the first line is at the start of the container while the last one is at the end
space-around: lines evenly distributed with equal space around each line
stretch (default): lines stretch to take up the remaining space

Following above, try to use something like that in your code:

<div class="container">
    <button>div1</button>
    <button>div1</button>
</div
@media only screen and (max-width: 500px) {
    .container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-items: center
    }
}

I also prepared snippet for you to let you play with it.

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: center
}

<div class="container">
    <button>div1</button>
    <button>div1</button>
</div>

More info on flexes (including examples) you can find here

How to swap the position of divs?

3 个答案:

HTML

CSS

display

flex-direction

flex-wrap

justify-content

align-items

align-content