Liste, welche sich jeden Wochentag neu Strukturiert

[Forumsgast]

Guten Tag,

Ich habe mich gefragt, wie ich es schaffe meine Idee umzusetzen. Ich wollte eine Arte Liste, oder auch Container erstellen, welche sich jeden Wochentag (außer das Wochenende) neu Sortieren. Ich stelle mir das so vor, das Container 1 (SECT1) mit seinen Inhalten am Montag ganz oben steht. Am Dienstag steht Container 2 (SECT2) ganz oben, und Container 1 (SECT1) wandert nach ganz Unten. Am Mittwoch das selbe, steht Container 3 (SECT3) ganz oben und SECT 2 ist nach ganz Unten gewandert und SECT1 ist eine über SECT2, sodass wenn die Woche um ist, am Montag wieder SECT1 steht.

Hier ist ein auf die Schnelle erstellter Ansatz:
(So ungefähr soll das Aussehen, wenn es fertig ist)

       <!--SECT1--> <div class="uk-card uk-card-default uk-card-body uk-width-1-1@m">
    <h3 style="text-align: center;" class="uk-card-title"><strong>Montag</strong></h3>
    <div class="uk-child-width-1-4@m" uk-grid>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" alt="">
            </div>
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" alt="">
            </div>
        </div>
    </div>



    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" alt="">
            </div>
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" alt="">
            </div>
        </div>
    </div>

        </div>

        </div>  <!--SECT1-Ende-->

       <!--SECT2--> <div class="uk-card uk-card-default uk-card-body uk-width-1-1@m">
    <h3 style="text-align: center;" class="uk-card-title"><strong>Dienstag</strong></h3>
    <div class="uk-child-width-1-4@m" uk-grid>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" alt="">
            </div>
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" alt="">
            </div>
        </div>
    </div>



    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" alt="">
            </div>
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" alt="">
            </div>
        </div>
    </div>

        </div>

        </div><!--SECT2--ENDE-->

       <!--SECT3--> <div class="uk-card uk-card-default uk-card-body uk-width-1-1@m">
    <h3 style="text-align: center;" class="uk-card-title"><strong>Mittwoch</strong></h3>
    <div class="uk-child-width-1-4@m" uk-grid>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" alt="">
            </div>
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" alt="">
            </div>
        </div>
    </div>



    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" alt="">
            </div>
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" alt="">
            </div>
        </div>
    </div>

        </div>

        </div><!--SECT3--ENDE-->

      <!--SECT4-->  <div class="uk-card uk-card-default uk-card-body uk-width-1-1@m">
    <h3 style="text-align: center;" class="uk-card-title"><strong>Donnerstag</strong></h3>
    <div class="uk-child-width-1-4@m" uk-grid>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" alt="">
            </div>
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" alt="">
            </div>
        </div>
    </div>



    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" alt="">
            </div>
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" alt="">
            </div>
        </div>
    </div>

        </div>

        </div><!--SECT4--ENDE-->

       <!--SECT5--> <div class="uk-card uk-card-default uk-card-body uk-width-1-1@m">
    <h3 style="text-align: center;" class="uk-card-title"><strong>Freitag</strong></h3>
    <div class="uk-child-width-1-4@m" uk-grid>
    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" alt="">
            </div>
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" alt="">
            </div>
        </div>
    </div>



    <div>
        <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
                <img src="images/light.jpg" alt="">
            </div>
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Top</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default">
            <div style="text-align: center;" class="uk-card-body">
                <h3 class="uk-card-title">Media Bottom</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <div class="uk-card-media-bottom">
                <img src="images/light.jpg" alt="">
            </div>
        </div>
    </div>

        </div>

        </div><!--SECT5--ENDE-->

Ich hoffe es ist verständlich wie ich mir das vorstelle. Ich danke im Voraus!

Liebe Grüße,

Konsti

[Forumsgast]

Warum ein neuer Beitrag, hier hast du schon die selbe Frage gestellt und auch Antworten bekommen:
https://www.php.de/forum/webentwickl...ukturiert-wird