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解决它，但这是一个丑陋的解决方案 imo。

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 像素......只需继续调整小提琴的大小以查看此操作。

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

Answer 2

/* 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) { ... }