Question

我想改变两个div的顺序。 HTML：

<div>container
<div> Navigation backwards </div>
<div> Social buttons </div>
<div> Navigation forwards </div>
</div>

在大屏幕上看起来像这样：＆lt; - [社交] - ＆gt;

我需要将小型（移动）设备更改为：
＆lt; - - ＆gt;
[社会]

纯css有可能吗？我可以添加一些HTML并使用 display：none 解决它，但这是一个丑陋的解决方案。

Answer 1

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Answer 2

所以@acudars是对的...但是这里有一些事情需要考虑。有一件事是你的标记顺序会使得实现这一点变得棘手...所以通过添加底部的社交按钮，你可以确保这更容易实现。

我继续做了一个jsFiddle：Demo

HTML

<div class="navCont">
  <div class="arrowPrev">&larr;</div>
  <div class="arrowNext">&rarr;</div>
  <div class="socialButtons">Social Buttons</div>
</div>

CSS

.navCont {
    background: #f6f6f6;
    border-radius: 5px;
    clear: both;
    overflow: hidden;
    padding: 5px 10px;
}

.arrowPrev {
    float: left;
}

.socialButtons {
    text-align: center;
}

.arrowNext {
    float: right;
}


@media (max-width: 320px) {
  .socialButtons {
    float: none;
    clear: both;
  }
}

因此，假设您的目标是移动设备的宽度为320px ......只需继续调整小提琴的大小即可实现此功能。

CSS很直接，我只是添加了一些风格来说清楚。

Answer 3

您可能会觉得这很有用。

此链接根据媒体显示不同类型的CSS样式（取决于视图屏幕的大小）。 http://css-tricks.com/resolution-specific-stylesheets/

：）

用css重新排列3个div

3 个答案:

HTML

CSS