将HTML块移动到不同的顺序以进行响应式设计

Question

我需要一个纯CSS选项来移动某些内容，使其看起来只在特定宽度的内容部分下面。

我已经为断点设置了样式表，因此可以将特定样式应用于我的移动宽度。

该页面是项目的转发器，每个项目都带有数字，正文和图标。它们是交替的，HTML从显示左侧的图标到显示右侧的图标。它需要这样，并且由于内容的扩展和反复使用而无法浮动

以下是桌面输出的示例：JS Fiddle。请注意它是响应式的，正文文本区域中可能有很多文本，它会浮动。完美。

当转向移动时，它会稍微改变一下。图标变为全宽，并且应该位于身体内容的下方。

这种作品。问题是HTML首先在DOM中显示图标，然后在下一次重复时显示，最后一次显示。

如何在不使用JavaScript的情况下div icon移动位置？这仅适用于移动设备，因此CSS3可能有解决方案吗？

This is how it currently looks on mobile。您可以看到它是错误的，图标需要始终位于文本下方。它需要扩展到内容并完全响应，没有固定的高度。

您可以看到数字2,4等都正确，图标显示在下方。

由于

Answer 1

您应该可以使用flexbox以及flex-flow和order属性来更改方向和元素序列。

Answer 2

为狭窄设备完成工作的CSS就像这样：

http://codepen.io/cimmanon/pen/BJleF

.view-reasons .views-reasons-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.view-reasons .views-field-field-icon {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

只需将它们放在适当的媒体查询中即可。这适用于Opera，Chrome，IE10，Firefox以及除Opera Mini之外的所有移动浏览器（请参阅：http://caniuse.com/#feat=flexbox）。

Answer 3

我已经复制了你的小提琴HERE

你会看到6行，我相信所有行都是一样的。

前两个来自你原来的例子。

在剩下的4个中，我将原来的课程改为“排”;我保持始终是相同的顺序。现在，应用于使偶数行设置不同的样式是：

大部分技巧是使用图像的绝对位置，并将其与右侧对齐。 （剩下的大部分代码都是你的）

.row {
    border-bottom:1px dotted #464637;
    padding-bottom:15px;
    margin-bottom:15px;
    min-height: 150px;
}

.row .views-field-field-icon{
    display:inline-block;
    width:41%;
    margin-right: 0;
}

.row:nth-child(even) .views-field-field-icon{
    position: absolute;
    right: 0px;
    padding-right: 6%;
}

Answer 4

或者你可以使用css3 :nth-of-type选择器，以及vals'回答，

看看这个pen

（我确实更改了你的班级名称，但我仍然可以关注，我认为）

您还可以调整浏览器的大小并通过媒体查询查看更改

Answer 5

如果没有脚本，您不会“将HTML块移动到不同的顺序”，但是使用一些棘手的CSS可以让它看起来像是有了。

看看我的个人网站nicksaemenes.com（正在进行中的工作 - 陈述显而易见的事情），看看它是否能完成你正在尝试的东西 - 我认为确实如此。您可以找到它的所有源代码here on Github。

您应该研究的一件事是您的HTML交替图标/图像和段落的顺序。我建议这是一个问题，在这种情况下你的源顺序应该是一致的。

虽然没有像我发布的网站那样进行，this Codepen显示了我网站的早期开发阶段，可能会更容易理解我是如何完成我所看到的对你所看到的。< / p>

section:after, .tweener:after, section .info-block:after {
  content: "";
  display: table;
  clear: both;
}

section a, section:hover > div {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
section a:hover, section:hover > div:hover {
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}

html {
  color: #666;
}

h1 {
  color: #333;
  padding: 2rem;
  margin: 0;
  text-align: center;
  font-weight: normal;
}

h2 {
  color: #444;
  margin-top: 0;
}

p {
  line-height: 1.8;
}

li:after {
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.5);
  content: "Nick Anderson - flic.kr/ps/QG591";
  padding: .5rem 1rem .5rem .5rem;
  position: absolute;
  bottom: 1rem;
  right: 0;
  font-size: 10px;
}

/* https://stackoverflow.com/questions/20150621/sass-mixin-for-animation-keyframe-which-includes-multiple-stages-and-transform-p/23861638#23861638
animation mixing
keyframe animation
@include animation('animation-name .4s 1')*/
html {
  background: white;
  padding: 1rem;
  font-family: sans-serif;
}

section {
  background: white;
  max-width: 1024px;
  margin: auto;
  /* The Holy Grail of CSS Centering - http://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114 */
}
section a {
  color: #666;
  text-decoration: none;
  padding: 1rem;
  border: 1px solid;
  float: left;
}
section a:hover {
  background: #111;
  border-color: transparent;
  color: white;
  opacity: .75;
}
section img {
  width: 100%;
}
section p {
  margin-top: 0;
  text-align: left;
}
section .contained {
  height: 70%;
  margin: auto;
  width: 100%;
}
section .outer {
  display: table;
  height: 100%;
  width: 100%;
  word-spacing: -1rem;
}
section .inner {
  display: table-cell;
  vertical-align: middle;
}
section .centered {
  display: inline-block;
  float: left;
  position: relative;
  width: 100%;
}
section:hover > div {
  opacity: .5;
}
section:hover > div:hover {
  opacity: 1;
}

/* The "Tweener" ... My addition to allow for cross-browser support of alternating element alignment of non-css-class-ified elements*/
.tweener {
  direction: ltr;
  display: inline-table;
  height: auto;
  width: 50%;
  word-spacing: normal;
}
.tweener .inner {
  width: 100% !important;
}

/*.tweener:nth-of-type(odd) .centered > * {
  @include box-shadow(0 5px 1px -3px rgba(0,0,0,.2));
}*/
.text-block {
  width: 80%;
  float: right;
}

.tweener {
  height: 100%;
  vertical-align: middle;
  width: 50%;
}

section .info-block {
  border-bottom: 1px solid #ccc;
  padding: 4rem 0;
}
section .info-block:last-of-type {
  border: none;
}
section .info-block:nth-child(2n) .outer {
  direction: rtl;
}
section .info-block:nth-child(2n) .text-block {
  float: left;
}

.video-container {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
  position: relative;
}
.video-container iframe,
.video-container object,
.video-container embed {
  border: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

@-webkit-keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
@-moz-keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
@-o-keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
@keyframes xfade {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
}
section ul.xfade {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 66.69922%;
  position: relative;
  width: 100%;
}
section ul.xfade li {
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}
section ul.xfade li:nth-child(3) {
  -webkit-animation: xfade 12s 0s infinite;
  -moz-animation: xfade 12s 0s infinite;
  -o-animation: xfade 12s 0s infinite;
  animation: xfade 12s 0s infinite;
}
section ul.xfade li:nth-child(2) {
  -webkit-animation: xfade 12s 4s infinite;
  -moz-animation: xfade 12s 4s infinite;
  -o-animation: xfade 12s 4s infinite;
  animation: xfade 12s 4s infinite;
}
section ul.xfade li:nth-child(1) {
  -webkit-animation: xfade 12s 8s infinite;
  -moz-animation: xfade 12s 8s infinite;
  -o-animation: xfade 12s 8s infinite;
  animation: xfade 12s 8s infinite;
}

section .info-block:nth-child(3n+2) ul.xfade li:nth-child(3) {
  -webkit-animation: xfade 12s -1s infinite;
  -moz-animation: xfade 12s -1s infinite;
  -o-animation: xfade 12s -1s infinite;
  animation: xfade 12s -1s infinite;
}
section .info-block:nth-child(3n+2) ul.xfade li:nth-child(2) {
  -webkit-animation: xfade 12s 3s infinite;
  -moz-animation: xfade 12s 3s infinite;
  -o-animation: xfade 12s 3s infinite;
  animation: xfade 12s 3s infinite;
}
section .info-block:nth-child(3n+2) ul.xfade li:nth-child(1) {
  -webkit-animation: xfade 12s 7s infinite;
  -moz-animation: xfade 12s 7s infinite;
  -o-animation: xfade 12s 7s infinite;
  animation: xfade 12s 7s infinite;
}

section .info-block:nth-child(3n+3) ul.xfade li:nth-child(3) {
  -webkit-animation: xfade 12s -2s infinite;
  -moz-animation: xfade 12s -2s infinite;
  -o-animation: xfade 12s -2s infinite;
  animation: xfade 12s -2s infinite;
}
section .info-block:nth-child(3n+3) ul.xfade li:nth-child(2) {
  -webkit-animation: xfade 12s 2s infinite;
  -moz-animation: xfade 12s 2s infinite;
  -o-animation: xfade 12s 2s infinite;
  animation: xfade 12s 2s infinite;
}
section .info-block:nth-child(3n+3) ul.xfade li:nth-child(1) {
  -webkit-animation: xfade 12s 6s infinite;
  -moz-animation: xfade 12s 6s infinite;
  -o-animation: xfade 12s 6s infinite;
  animation: xfade 12s 6s infinite;
}

<!--All photo credits go to Nick Anderson flickr.com/nickanderson33-->
<h1> A collection of techniques I've picked up and put together over the past year or so</h1>
<section>
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <ul class="xfade">
              <li><img alt="dock" src="//c4.staticflickr.com/8/7019/6562781091_0c75a135f6_b.jpg" /></li>
              <li><img alt="shack" src="//c4.staticflickr.com/8/7029/6562780531_d2a5be5157_b.jpg" /></li>
              <li><img alt="flower" src="//c3.staticflickr.com/7/6006/5988132647_94f7193719_b.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Vertical Centering</h2>
              <p>Use any amount of text and any size photo. </p>
              <p>If you shrink the window width you'll see that when the image height is smaller than the text height, the two elements will remain vertically centered with each other. </p>
              <p>This is a modified version of ... </p>
              <a href="http://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114"> The Holy Grail of CSS Centering</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <ul class="xfade">
              <li><img alt="stained glass" src="//c4.staticflickr.com/8/7358/8779551390_85fbae4bfb_h.jpg" /></li>
              <li><img alt="ring" src="//c4.staticflickr.com/8/7150/6722043431_b59b6f7d8f_b.jpg" /></li>
              <li><img alt="sunflower" src="//c3.staticflickr.com/7/6182/6085971358_25fdd877b0_b.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>
         
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Alternating Alignment of Elements</h2>
              <p>The HTML structure per row is consistent - image then text.</p>
              <p>Typically, you can accomplish the alternating alignment of elements with floats, but in this case, floating elements removes their ability to be vertically centered - Boo! </p>
              <p>Thus, I employed some ol' RTL trickery. I had to include one additional div (with the "tweener" class) to make this happen, but in the end I think it is worth it. Especially since it works in all modern browers.</p>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
           <ul class="xfade">
              <li><img alt="flooded" src="//c3.staticflickr.com/3/2264/5814476694_4ea5265e3a_b.jpg" /></li>
              <li><img alt="shooting" src="//c4.staticflickr.com/4/3237/5872035040_cfc7f77cb8_b.jpg" /></li>
              <li><img alt="truck" src="//c4.staticflickr.com/8/7358/8779551390_85fbae4bfb_h.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Pure CSS Image Rotator</h2>
              <p>I snagged the initial code from Mark Lee, then made it work for me.</p>
              <p>NOTE: If you use the CSS image rotator you'll want to make sure that your photos (of the same group) use the same aspect ratios.</p>
              <a href="http://codepen.io/leemark/pen/DvliI">Mark's Pen</a>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
		  
  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="video-container">
              <iframe width="640" height="360" src="https://www.youtube.com/embed/cbSbbY5ibas?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
         
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Responsive Embedded Video</h2>
              <p>First off, both Kilian Martin and Brett Novak are incredible at what they do. Much respect.</p>
              <p>Lifted from the Smashing Magazine article describing how to make iframes responsive</p>
              <a href="http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/">Smashing Article</a>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
		  
		  <div class="contained info-block">
    <div class="outer">
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <ul class="xfade">
              <li><img alt="couple" src="//c3.staticflickr.com/7/6007/5988700008_36d5dc34a9_b.jpg" /></li>
              <li><img alt="stars" src="//c3.staticflickr.com/7/6025/5978705415_00f22c1e65_b.jpg" /></li>
              <li><img alt="lake" src="//c3.staticflickr.com/7/6012/5979259078_f4c53fee72_b.jpg" /></li>
            </ul>
          </div>
        </div>
      </div>
         
      <div class="tweener">
        <div class="inner">
          <div class="centered">
            <div class="text-block">
              <h2>Different Transitions for Hover On / Hover Off</h2>
              <p>A subtle, but classy way to add that extra shine to your site is to use different transitions for hover on vs. hover off. The links in this demo have a transition duration of .1s for the hover on, but .5s for the hover off. You have to be careful with this as it can be an unexpected behavior that leads to the impression that something isn't working correctly, but I believe that misperception can only be fought with good design decisions and time. </p>
              <p>Also, if you don't know of Chris Coyier, you have either been living under a rock or you are not a web designer. </p>
              <a href="http://css-tricks.com/different-transitions-for-hover-on-hover-off/">CSS-Tricks Article</a>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
  
</section>