Bootstrap 3 move position of divs on mobile

Question

So according to this: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering I should be able to swap the position of the divs based on the viewport.

I tried with the following html (it is twig - but that shouldn't make a difference):

    <div class="row">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6 col-xs-12 col-xs-push-12" id="recommend-container">
                    <h1>
                        <i class="fas fa-chess-king"></i>
                        Solomon
                    </h1>

                    <hr />

                    <div id="recommend-contents">
                        <p>Solomon Recommends:</p>

                        {% for type,recommend in recommendations %}
                            <h3>{{ type }}</h3>

                            <ul>
                                {% for index,name in recommend %}
                                    <li>{{ name }}</li>
                                {% endfor %}
                            </ul>
                        {% endfor %}
                    </div>
                </div>

                <div class="col-md-6 col-xs-12 col-xs-pull-12" id="register-section-container">
                    <h1>Register</h1>
                    <hr />

                    {{ form_start(form) }}
                        {{ form_row(form.username, { 'attr': {'class': 'form-control login-input', 'placeholder': 'username'} }) }}
                        {{ form_row(form.email, { 'attr': {'class': 'form-control login-input', 'placeholder': 'email'} }) }}
                        {{ form_row(form.plainPassword.first, { 'attr': {'class': 'form-control login-input', 'placeholder': 'password'} }) }}
                        {{ form_row(form.plainPassword.second, { 'attr': {'class': 'form-control login-input', 'placeholder': 'retype password'} }) }}

                        <div class="register-btn-container">
                            <button class="btn btn-primary d-inline-block" type="submit">
                                <i class="fas fa-check"></i>
                                Register
                            </button>

                            <p class="d-inline-block">Already signed up? <a href="/login">Login</a></p>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>

which not only doesn't work on mobile, but creates a weird space between the divs on desktop view? I really don't understand the logic of it, how do I debug or fix? (CSS is the real Isildur's bane)

Answer 1

I believe you issue is du to the fact that Bootstrap is a mobile first framework, and you try to use it as a desktop first one.

You should place divs the way you want them to be displayed on a mobile, THEN pull/push them on larger screen :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
 <div class="container-fluid">
    <div class="row">
        <!-- LEFT ON DESKTOP -->
        <div class="col-xs-12 col-sm-6 col-sm-push-6" id="recommend-container">
        I'm on the right on desktop
        </div>
        <!-- RIGHT ON DESKTOP -->
        <div class="col-xs-12 col-sm-6 col-sm-pull-6" id="register-section-container">
        I'm on the left on desktop
        </div>
    </div>
</div>

Here is that will append:

on mobile devices (viewport under 768px width): the .col-xs-12 rule apply so divs should be display on top of each other in the same order as the code.

Then when you reach 768px width (and up): the .col-sm-6 rule apply so you should have the two columns displayed side by side as each column is set to occupy 1/2 of the available space (6/12 to be exact :)). And as you want to "inverse" the "logical" order of the columns, you add one rule to push the first column on the right (.col-sm-pull-6), and one rule to pull the second column on the left (.col-sm-pull-6).

As long as you don't have rules specific to superior width (aka: "md" and "lg"), the "sm" rule will be used on larger screens.