bootstrap 4 alpha 6 flexbox responsive trouble

Question

...I being checking the new bootstrap 4 flexbox grid

https://v4-alpha.getbootstrap.com/utilities/flexbox/

And I have some questions about it...I try to understand how use the responsive flexbox classes created by bootstrap...I have something like this:

<div id="start" class="d-flex flex-row justify-content-center">
              <img src="img/logocolor.gif" class="img-fluid" alt="Responsive image">

              <div class="card border-0">
                    <div class="card-block">
                          <h4 class="card-title text-center">DERMATOCOSMATR&Iacute;A PROFESIONAL</h4>
                          <p class="card-text">Somos un equipo multidiciplinario que se encarga de atender y solucionar las inquietudes<br> y necesidades del paciente desde un punto de vista integral; cl&iacutenico y cosm&eacutetico.</p>
                          <a href="#" class="card-link">Another link</a>
                    </div>
              </div>
        </div>

And it's working on desktop device...but when I try to view my page on smaller device like cellphone I try to use...for example..the responsive class for small size "flex-sm-wrap" but nothing happens on small view...but the changes happens on the desktop size!!! I don't understand why it's taking the classes that should work on small devices, and it's using them on desktop size ...it's very confusing....How should I specify the classes for every device size ? Mi objetive is build a responsive web using this bootstrap 4 flexbox grid.Thanks for your help !

Can you create a fiddle for this? Or just take a screenshot of what the exact goal? — claudios, Jan 20 '17 at 01:16
ok @claudios here it is....https://jsfiddle.net/f5kx4bhe/ ...the result in this fiddle it's how should be on cell device using "flex-sm-wrap" ...but this is happening on desktop device — Master Yoda, Jan 20 '17 at 01:28

Carol Skelly · Answer 1 · 2017-02-02T22:05:42.197

The fiddle is broken since it doesn't properly include Bootstrap. Instead of using the flexbox utilities, it may be easier to get the layout you want using the flexbox grid (rows and columns).

<div id="start" class="row">
        <div class="col-md-6 text-center"><img src="http://lorempixel.com/output/animals-q-c-640-480-5.jpg" class="img-fluid" height="100" alt="Responsive image"></div>
        <div class="col-md-6">
            <div class="card border-0">
                <div class="card-block">
                    <h4 class="card-title text-center">DERMATOCOSMATRÍA PROFESIONAL</h4>
                    <p class="card-text">Somos un equipo multidiciplinario que se encarga de atender y solucionar las inquietudes
                        <br> y necesidades del paciente desde un punto de vista integral;</p>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
    </div>

Here's a Codeply demo (Bootstrap 4 alpha 6 selected)..

http://www.codeply.com/go/IKFZH4ccIW

bootstrap 4 alpha 6 flexbox responsive trouble

1 Answers1