重新排序选项卡区域中的<ul> / <li>元素，仅限css

Question

我在我的网站上使用以下jquery选项卡区域;

<ul id="tabs-container">
    <ul class="tabs-menu">
        <li id="tab-title1" class="current"><a href="#tab-1">1</a></li>
        <li id="tab-title2"><a href="#tab-2">2</a></li>
        <li id="tab-title3"><a href="#tab-3">3</a></li>
        <li id="tab-title4"><a href="#tab-4">4</a></li>
    </ul>

    <ul class="tab">           
        <li id="tab-1" class="tab-content">
             content-text 1
        </li>
        <li id="tab-2" class="tab-content">
             content-text 2
        </li>
        <li id="tab-3" class="tab-content">
             content-text 3
        </li>
        <li id="tab-4" class="tab-content">
             content-text 4
        </li>
    </ul>
</ul>

$(document).ready(function() {
    $(".tabs-menu a").hover(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});

效果很好，但在响应式视图中，我需要在content-text1标签后显示tab-title1（并在第二个标签后显示content-text2等）我可以使用仅限CSS？