使用引导程序将网格的位置并排交换到顶部和底部 [英] Swap the positions of grids which are side by side to top and bottom using bootstrap

问题描述

col-md-6（（p）内容）col-md-4（image）

所以，当屏幕尺寸变成小屏幕和xs屏幕时，这些div应该不应该并排排列，他们应该像这样对齐顶部和底部：

image

content

以下是我在中型屏幕上试用的代码：

 < div class =row> 
< p class =col-md-6>内容来到这里< / p> 
< img src =someimageclass =col-md-4/> 
  

也就是说，图片应该在最上面，内容应该在小屏幕下面。 / p>

我不知道如何在小屏幕中将它们转换为顶部和底部。

我知道通过使用推拉可以将网格位置左右改变，但是如何将右侧的元素移动到顶部？提前致谢：）

解决方案

如果您无法为 xs 和 sm ，您只需将它们交换到代码中并使用 pull-push 来替换 md ：

< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheet/>< div class =container> < div class =row> < div class =col-md-4 col-md-push-6>< img src =// placehold.it/200x150class =img-fluid>< / div> < div class =col-md-6 col-md-pull-4>< p>内容来到这里< / p>< / div> < / div>< / div>

I have two divs(content and an image) which are side by side in medium screens.

col-md-6(content) col-md-4(image)

So, when the screen size is changed to small screens and xs screens these div's shouldn't be side by side they should be aligned top and bottom like this :

image

content

Here's the code that I'm trying in medium screens:

<div class="row">
<p class="col-md-6">Content comes here</p>
<img src="someimage" class="col-md-4"/>

i.e., the image should be on the top and the content should be below it in small screens.

I'm not able to get the idea how to convert them top and bottom in small screens

I know that grid positions can be changed to left and right by using push and pull but how do I move an element which is on the right side to the top? Thanks in advance :)

解决方案

If you can't pull and push them for xs and sm, you need just swap them in the code and use pull-push for md:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
      <div class="col-md-4 col-md-push-6"><img src="//placehold.it/200x150" class="img-fluid"></div>
      <div class="col-md-6 col-md-pull-4"><p>Content comes here</p></div>
    </div>
</div>

这篇关于使用引导程序将网格的位置并排交换到顶部和底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！