Css 将HTML块移动到不同的顺序以实现响应性设计

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

我已经为断点设置了样式表，因此可以对我的手机宽度应用特定的样式

页面是一个项目的重复器，每个项目都有一个数字、正文和图标。它们交替出现，HTML从左侧显示图标变为右侧显示图标。由于内容的扩展和重复性，它需要这样，并且不能浮动

以下是桌面上的输出示例：。请注意，它是响应性的，正文文本区域中可能有大量文本，它将浮动。太好了

当转到移动设备时，它会发生一些变化。图标变为全宽，应位于主体内容下方

这类工作。问题是HTML首先在DOM中显示图标，然后在下一次重复时，它最后出现

如何使

图标的
div
在没有JavaScript的情况下移动位置？这仅适用于移动设备，所以CSS3是否有解决方案

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

您可以看到数字2、4等都是正确的，下面显示了图标

感谢
您应该能够通过使用
flex-flow
和
order
属性来更改方向和元素顺序来实现此目的。
您应该能够通过使用
flex-flow
和
order
属性来更改方向和元素顺序。
CSS来实现此目的对窄设备执行以下操作：


只需将它们放在相应的媒体查询中即可。这将适用于Opera、Chrome、IE10、Firefox以及除Opera Mini（请参阅：）之外的几乎所有移动浏览器。
用于窄设备的CSS如下所示：


只需将它们放在相应的媒体查询中即可。这将适用于Opera、Chrome、IE10、Firefox以及除Opera Mini（请参阅：）之外的几乎所有移动浏览器。
我复制了你的小提琴

您将看到6行，我相信所有行的行为都是相同的

前2个来自您的原始示例

在剩下的4节课中，我把你原来的课改成了“行”；我一直保持着同样的秩序。现在，用于使偶数行的样式不同的样式是：

大多数技巧是使用图像的绝对位置，并将其向右对齐。（剩下的大部分代码是您的）

我复制了你的小提琴

您将看到6行，我相信所有行的行为都是相同的

前2个来自您的原始示例

在剩下的4节课中，我把你原来的课改成了“行”；我一直保持着同样的秩序。现在，用于使偶数行的样式不同的样式是：

大多数技巧是使用图像的绝对位置，并将其向右对齐。（剩下的大部分代码是您的）

或者您可以使用css3
：第n种类型的
选择器，以及“答案

看看这个

（我确实改了你的班名，但我想你还是可以跟着改的）

您还可以调整浏览器的大小，并通过媒体查询查看更改，
或者您可以使用css3
：n类型的
选择器以及“answer

看看这个

（我确实改了你的班名，但我想你还是可以跟着改的）

您还可以调整浏览器的大小，并通过媒体查询查看更改，
如果不使用脚本，您将不会“将HTML块移动到不同的顺序”，但使用一些复杂的CSS，您可以使其看起来像您有

看看我的个人网站（一个正在进行中的工作，很明显），看看它是否完成了你正在尝试的事情，我想它确实做到了。您可以找到它的所有源代码

您应该了解的一件事是，为什么HTML交替使用图标/图像和段落的顺序。我认为这是一个问题，在这种情况下，您的源订单应该是一致的

虽然没有我发布的网站那么远，但展示了我网站开发的早期阶段，这对于理解我是如何完成你所追求的目标可能更容易理解


section:after、.tweener:after、section.info块：after{
内容：“；
显示：表格；
明确：两者皆有；
}
a部分，部分：悬停>div{
-moz转换属性：全部；
-o-过渡性质：全部；
-webkit转换属性：全部；
过渡性质：全部；
-moz转换持续时间：0.5s；
-o-过渡持续时间：0.5s；
-webkit转换持续时间：0.5s；
过渡时间：0.5s；
-moz过渡计时功能：缓解；
-o-转换-定时-功能：缓解；
-webkit过渡计时功能：缓解；
过渡定时功能：缓解；
}
部分a：悬停，部分：悬停>分区：悬停{
-moz转换持续时间：0.1s；
-o-过渡持续时间：0.1s；
-webkit转换持续时间：0.1s；
过渡时间：0.1s；
}
html{
颜色：#666；
}
h1{
颜色：#333；
填充：2rem；
保证金：0；
文本对齐：居中；
字体大小：正常；
}
氢{
颜色：#444；
边际上限：0；
}
p{
线高：1.8；
}
李：之后{
背景：rgba（0,0,0,0.5）；
颜色：rgba（255，255，255，0.5）；
内容：“尼克·安德森-flic.kr/ps/QG591”；
填充：.5rem 1rem.5rem.5rem；
位置：绝对位置；
底部：1rem；
右：0；
字体大小：10px；
}
/* https://stackoverflow.com/questions/20150621/sass-mixin-for-animation-keyframe-which-includes-multiple-stages-and-transform-p/23861638#23861638
动画混合
关键帧动画
@包括动画（'animation-name.4s 1'）*/
html{
文学士
.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;
}

.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%;
}