首先在CSS中使用响应式

我使用引导'featurette'功能。在页面上有一个文字在左边，图像在右边。当你缩小浏览器尺寸时，它们会相互重叠，文字在顶部，图像在底部。我该如何改变这一点，以便图像是最前面的，然后是下面的文字？首先在CSS中使用响应式

广告的例子就是在这里http://getbootstrap.com/examples/carousel/

如果您发现该功能的一部分，你会明白我的意思，当你调整。

我已经尝试更改浮动位置，因为这是我能想到的唯一的事情，但它没有奏效。我只是为了澄清，当超过756px（或任何大小）时，我仍然希望它们位于相同的位置，但只是希望图像在上面的示例中更改大小时位于顶部。

来源

2016-09-05 user2903379

你有什么已经尝试过？ – ggdx

那么他们都有浮动：左，所以我试图让图像左浮动和文本右浮动，以便它的顺序，但没有奏效。当它在更大的分辨率 – user2903379

时它弄乱了订单也许尝试Flexbox，您可以订购元素 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – ggdx

您应该将display：flex属性用于容器，并且对于这两个元素使用order属性，例如下面的示例。尝试改变元素的顺序并看看。

.elements-container{ 
 
    background: #000; 
 
    width: 100%; 
 
    height: 500px; 
 
    display: flex; 
 
} 
 
.text-box{ 
 
    order: 2; 
 
    width: 200px; 
 
    height: 200px; 
 
    color: #ffffff; 
 
    background: #ff0000; 
 
    display: block; 
 
} 
 
.image-box{ 
 
    order: 1; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: block; 
 
}

<div class="elements-container"> 
 
    <div class="text-box">This is text</div> 
 
    <div class="image-box"><img src="http://lorempixel.com/200/200" /></div> 
 
</div>

来源

2016-09-05 10:08:06

谢谢！我不知道你可以给CSS添加命令。我仍然在学习css3。谢谢 – user2903379

祝你好运，进一步了解css-tricks网站的大部分css3功能。 –

首先在CSS中使用响应式

回答

相关问题