Trouble with content alignment using uk-flex-row-reverse in a row layout

33 Views Asked by At

I'm attempting to alternate the layout of a series of rows, but I'm encountering issues with the content alignment when I use uk-flex-row-reverse.

<section class="uk-section uk-background-">
    <div class="uk-container uk-container-large">
        <div class="uk-flex uk-flex-middle uk-flex ">
            <div class="uk-width-expand">
                <h2 class="uk-text-purple uk-text-boldest uk-h1 uk-margin-remove-top">
                    Instant service, personalized                   
                </h2>
                <div class="uk-text-bold uk-width-4-5">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
            <div class="uk-width-1-3">
                <img src="/site/assets/files/1385/1600x900.svg">
            </div>
        </div>
    </div>
</section>
<section class="uk-section uk-background-muted">
    <div class="uk-container uk-container-large">
        <div class="uk-flex uk-flex-middle uk-flex uk-flex-row-reverse">
            <div class="uk-width-expand">
                <h2 class="uk-text-purple uk-text-boldest uk-h1 uk-margin-remove-top">
                    Security you can count on                   
                </h2>
                <div class="uk-text-bold uk-width-4-5">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
                </div>
            </div>
            <div class="uk-width-1-3">
                <img src="/site/assets/files/1386/1600x900.svg">
            </div>
        </div>
    </div>
</section>

enter image description here

As you can see from the above, the content in the second row appears to be "colliding." I tried to push it to the right, but nothing works. What am I missing here?

Cheers!

0

There are 0 best solutions below