JSFiddle - React, Tailwind, and code Playground

by gsv60

HTML

Требуются решения, работаюшие и в IE9
<div class="test-section">
    <!-- -->
    <div class="desc">Имея консткрукцию такого вида нужно поменять местами дивы, используя только св-ва float. Дополнительные обертки не допускаются.</div>
    <!-- -->
    <div class="wrap oh">
        <div class="test fl">1</div>
        <div class="test fr">2</div>
        <div class="test fl">3</div>
    </div>
    <div class="wrap oh">
        <div class="test fr">1</div>
        <div class="test fl">2</div>
        <div class="test fr">3</div>
    </div>
    <div class="wrap oh">
        <div class="test fl">1</div>
        <div class="test fr">2</div>
        <div class="test fl">3</div>
    </div>
    <div class="wrap oh">
        <div class="test fr">1</div>
        <div class="test fr">2</div>
        <div class="test fl">3</div>
    </div>
    <div class="wrap oh">
        <div class="test fr">1</div>
        <div class="test fr">2</div>
        <div class="test fl">3</div>
    </div>
    <!-- -->
    <div class="desc">На такое</div>
    <!-- -->
    <div class="wrap oh">
        1 3 2 <br/>
        2 3 1 <br/>
        2 1 3 <br/>
        3 2 1 <br/>
        3 1 2 <br/>
    </div>
    <!-- -->
</div>

CSS

.test-section {border: 1px solid #ccc;padding:20px;margin-bottom:10px}
        .wrap {overflow:hidden;width:372px}
        .test {width:100px;height:100px;line-height:100px;border:2px solid #eee;margin:10px;text-align:center}
        .desc {color:#0c0c0c;clear:both}
        .desc-img {text-align:center}

        /* */
        .fl {float:left}
        .fr {float:right}
        .no {float:none}
        .oh {overflow:hidden}