Zamiana miejscami <i> z <p>

Cześć, mam takie pytanko czy da się zamienić stronami ikonę z opisem bez przepisywania całego kodu dla innej strony? Chodzi mi o to, że po najechaniu chciałbym mieć ikonkę w tym samym miejscu co była przed najechaniem, czyli tak jak zdj1 i zdj2. Przez mały błąd i zapomnienie jednego diva, zrobiłem cały wygląd na <i> zamiast na divie, i tak po prostu nie mogę odwrócić kolejności a chciałbym mieć napis "Statystyki" przed ikoną (zdj3)

<section class="status">
            <div class="status_content">
                <div class="podzial">
                    <div class="podglad_na_serwer">
                        <i class='bx bx-show'><p class="hidden_info">Podgląd na serwer</p></i>
                        
                    </div>




                    <div class="statystyki">
                        <i class='bx bx-bar-chart'><p class="hidden_info">Statystyki</p></i>
                    </div>
                </div>
            </div>
        </section>

.status .status_content .podzial .statystyki
{
    width: 12.5%;
    height: auto;
    display: flex;
    position: relative;
    justify-content: flex-end;
    font-size: 24px;
}
.status .status_content .podzial .statystyki i
{
    width: 19%;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    color: #fff;
    background: #cc0000;
    cursor: pointer;
    transition-duration: 0.5s;
}
.status .status_content .podzial .statystyki i .hidden_info
{
    display: none;
}
.status .status_content .podzial .statystyki i:hover
{
    width: 100%;
}
.status .status_content .podzial .statystyki i:hover .hidden_info
{
    display: block;
    font-size: 14px;
    text-align: center;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    animation: fadeIn 1.25s ease;
}

.status .status_content .podzial .podglad_na_serwer
{
    width: 12.5%;
    height: auto;
    display: flex;
    position: relative;
    justify-content: flex-start;
    font-size: 24px;
}
.status .status_content .podzial .podglad_na_serwer i
{
    width: 19%;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    color: #fff;
    background: #cc0000;
    cursor: pointer;
    transition-duration: 0.5s;
}
.status .status_content .podzial .podglad_na_serwer i .hidden_info
{
    display: none;
}
.status .status_content .podzial .podglad_na_serwer i:hover
{
    width: 100%;
}
.status .status_content .podzial .podglad_na_serwer i:hover .hidden_info
{
    display: block;
    font-size: 14px;
    text-align: center;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    animation: fadeIn 1.25s ease;
}

To o co pytasz zapewne jest proste.
Problemem jest odgadnięcie, o co właściwie pytasz.

Niemniej odnośnie zamiany kolejności elementów mogę polecić order działa tylko w elementach z display:flex;

Możesz użyć flexboxa.

Tutaj przykład jak odwrócić 2 elementy po najechaniu myszką.

<div class="parent">
    <span class"children-a">A</span>
    <span class="children-b">B</span>
</div>

.parent { display: flex; }
.children-a {  order: 1;  }
.children-b {  order: 2;  }

.parent:hover .children-a { order: 2; }
.parent:hover .children-b { order: 1; }

.parent { display: flex; }
.children-a {  order: 1;  }
.children-b {  order: 2;  }

.parent:hover .children-a { order: 2; }
.parent:hover .children-b { order: 1; }

To ma sens kiedy elementy są w tej samej hierarchii, mają wspólnego rodzica. U mnie jest problem, że przez nieuwagę wrzuciłem jedno w drugie

<div class="statystyki">
        <i class='bx bx-bar-chart'><p class="hidden_info">Statystyki</p></i>
</div>

.status .status_content .podzial .statystyki
{
    width: 12.5%;
    height: auto;
    display: flex;
    position: relative;
    justify-content: flex-end;
    font-size: 24px;
}
.status .status_content .podzial .statystyki i
{
    width: 19%;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    color: #fff;
    background: #cc0000;
    cursor: pointer;
    transition-duration: 0.5s;
}
.status .status_content .podzial .statystyki i .hidden_info
{
    display: none;
}
.status .status_content .podzial .statystyki i:hover
{
    width: 100%;
}
.status .status_content .podzial .statystyki i:hover .hidden_info
{
    display: block;
    font-size: 14px;
    text-align: center;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    animation: fadeIn 1.25s ease;
}

Ciekawi mnie czy idzie to naprawić jakimś łatwym sposobem, bo jak nie to po prostu przepiszę sobie to jutro.

Nie pokazujesz nigdzie jak masz ostylowane:bx-bar-char
ale wszystko sprowadza się do odpowiedniego ustawienia background-position żeby ikonka diagramu trzymała się prawej krawędzi <i> i ewentualnie padding dla tekstu.

No chyba, żeby ta ikonka nie była realizowana jako tło, tylko jako pseudoelement ::before lub ::after w takim wypadku musiałbyś zmienić położenie pseudoelementu.

No a w sumie czemu nie chcesz zmienić kolejności tych elementów w HTML?

Bo tak się to powinno zrobić; i dopiero gdyby był jakiś konkretny powód przeciwko, to wtedy próbować stylami.

ZeuberO napisał(a):

Jak zamienię miejscami to będę musiał przepisać praktycznie cały css do tego na nowo, otworzyłem temat bo myślałem, że może da się jakoś inaczej to zrobić np. w podobny sposób do order. Jeśli nie znajdzie się jakiś pomysł to siądę rano i przepiszę to na nowo z uwzględnieniem odbicia lustrzanego, bo nie jestem pewien czy jak odwrócę kolejność i z .hidden_info zmienię m.in display: none; na opacity: 0 to czy wszystkie animacje, wymiary itd. będą się dalej zgadzać.

No a dużo masz tego CSS? Nie powinieneś mieć więcej niż kilka rulesetów. Jeśli więcej, to prawdodpodobnie robisz coś bardzo dziwnego tutaj.

Taka dziwna tabelka nie powinna mieć dużo styli.

TomRiddle napisał(a):

bx-bar-char ma zmieniony tylko font w .status .status_content .podzial .statystyki {font-size: 24px} i zmieniony kolor w .status .status_content .podzial .statystyki i {color: #fff}

Zatem ta graficzka jest pewnie realizowana jako pseudoelement ::before / ::after zawierający pojedynczy znak czcionki z symbolami.
Zatem musisz sobie poszukać pozycjonowania tego pseudolelemtu i wyrównać go do prawej.

Dzięki wszystkim za chęci :D Przepisałem to na nowo i śmiga jak marzenie.

ZeuberO napisał(a):

Dzięki wszystkim za chęci :D Przepisałem to na nowo i śmiga jak marzenie.

Tak to trzeba było zrobić od początku.

order się używa jak chcesz zmienić kolejność dynamicznie (np dla różnych media queries).