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

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

#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.


#3

the page is live here


#4

I normally don’t hijack threads, but I have seen this website on several topics you have created while working on this site, and there is one thing that really bothers me …

If possible, you really need to find a better version of the logo (on the left side of the image). On a larger screen (i.e. desktop), it looks grainy and unprofessional. You may just be working with what you were given, but I would stress to the client (or for whomever you are creating the site) to give you a higher quality image of the logo.

I apologize for hijacking the thread, but just felt I had to say something.


#5

change your div to col-sm

<div class="col-sm">


#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