Question

这是我目前的html：

.left { width:50%; float:left; }
.right { width:50%; float:left; }

    <div class="container">
        <div class="left">This is left content</div>
        <div class="right">This is left content</div>
    </div>

使用此css，对于较小的分辨率right div位于left div下，但我想要相反，我希望left div位于right下。

有可能吗？

谢谢！

更新

对不起，如果我的问题不够明确，我使用媒体查询进行响应式布局。我已经针对不同的屏幕分辨率应用了媒体查询。我想要做的是保持桌面的顺序，即LEFT div然后RIGHT div。但对于移动设备，LEFT DIV应显示在RIGHT div下。 @GCyrillus示例代码正是我想要的。如果其他人有同样的问题，这是解决方案。

http://codepen.io/anon/pen/VYGKjp

Answer 1

你可以在这里做两件事，要么向右浮动而不是向左移动，要么改变你的标记，如下所示：

<div class="container">
    <div class="right">This is left content</div>
    <div class="left">This is left content</div>
</div>

Answer 2

只需使用右侧和左侧div切换顺序。

HTML

<div class="container">
    <div class="right">This is right content</div>
    <div class="left">This is left content</div>
</div>

CSS

.left { width:50%; float:left; }
.right { width:50%; float:left; }

Answer 3

切换divs

<div class="container">
  <div class="right">This is right content</div>
  <div class="left">This is left content</div>
</div>

浮在左下方的div

3 个答案: