css - 用CSS重新排列3个div

Question

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

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

在大屏幕上看起来像这样:<-- [社交] -->

我需要将小型(移动)设备的设置更改为:
<-- -->
[社交]

纯 css 可以吗？我可以只添加一些 HTML 并使用 display: none 来解决它，但我认为这是一个丑陋的解决方案。

Answer 1

所以@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;
  }
}

假设您的目标移动设备的宽度为 320 像素...只需继续调整 fiddle 的大小以查看实际效果。

CSS 非常简单，我只是添加了一点样式以使其清晰。