Bootstrap 4 beta two column grid go to one column on top of each other in mobile

1

I can’t seem to figure out how to get a two column grid to re-stack to one column on top of each other in smaller screen views. Currently my grid sizes down and when it hits approx 556px wide screen, the videos stack on top of each other, which is what I want. Once the screen size is smaller than approx 476px wide, the videos in the column resize to just skinny columns side by side. The image is what it

Capture

<div class="container"> 
<h1>References</h1>
<div class="row mb-2">
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/aaINOaWt938?rel=0?"></iframe>
<p>Click Above To View Testimonial Video!</p>
</div>
</div>
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/e6UWqeLaMm4?rel=0?"></iframe>
<p>Click Above To View Peter In Seminar Action!</p>
</div></div></div>
<div class="clearfix visible-sm"></div>

I really would like to stick with the Bootstrap css and not add something custom if possible.

2

I just tried your code above and this is what I get in codepen.

stacked2x.png332×741 156 KB

side2x.png1023×600 280 KB

3

the page is live here

5

change your div to col-sm

<div class="col-sm">

col_sm.png389×714 211 KB

col_sm_wide.png1007×639 397 KB

1 Like
6

thank you, I told my friend something like that originally

7

how do I get space or padding between the top and bottom video? I thought that mb-2 would have added it

8

Add mb-2 to the div

<div class="col-sm mb-2">
9

oh, thanks, I thought it was supposed to be on the div=row line

10

A margin is applied outside the Box model.
A padding is applied inside the Box model

1 Like