stack second sibling div before previous sibling div

by Ian Roberts

HTML

<div class="wrap">
    <div class="prev">
        3Previous
        <!-- test other text node types -->
        <ul>
            <li>list item1</li>
            <li>list item2</li>
            <li>list item3</li>
        </ul>
        <p>Para 1</p>
        <p>Para 2</p>
        <p>Para 3</p>
        <div>text node 1</div>
        <div>text node 2</div>
        <div>text node 3</div>
    </div>
    <div class="next">2Next</div>
    <div class="other">1other</div>
</div>

<div class="aprev">1Previous</div>
<div class="anext">2Next</div>
<div class="aother">3other</div>

<!-- conditional IE 
    .wrap,
    .prev,
    .next {
        display: inline;
        zoom: 1;
    }
-->

<!-- ref:http://stackoverflow.com/questions/10269168/float-next-sibling-left-of-previous-sibling -->

CSS

.wrap{
    display: inline-block;
    direction: rtl;
    }
.prev,
.next,
.other{
    display: inline-block;
    direction: ltr;
    }