Bootstrap Column Anordnung ändern (mobile)?

Hallo liebe Community,

ich arbeite gerade an einem Webshop und erstelle die Startseite selbst mit HTML und CSS und dem Bootstrap Grid Layout. Nun habe ich Bilder und Texte welche auf dem Desktop jeweils abwechselnd und untereinander kommen.

Also jeweils Bild und Text in einer "row" und dann entweder der Text oder das Bild als erstes. So ergibt sich in der Reihenfolge: Text-Bild, Bild-Text.

Für die Desktopansicht ist das auch genau so gewünscht, allerdings hätte ich gerne wenn die Columns beim Smartphone untereinander rutschen, dass nicht zwei Bilder nacheinander kommen, sondern: Text-Bild, Text-Bild.

Wie lässt sich das realisieren?

Hier mal ein bisschen Code, sehr reduziert.

Doppelter Content und ein/ausblenden über "hidden" ist für mich nicht möglich aus SEO-Gründen.

Danke :)

  <div class="container">

    <div class="row">
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor.</p>
      </div>
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <img src="img/platzhalter.jpg">
      </div>
      <div class="col-lg-9">
        <h3>Überschrift</h3>
        <p>Lorem ipsum dolor sit.</p>
      </div>
    </div>

  </div>

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

germanils

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

04.12.2020, 11:52

Einfach mal in die Doku schauen. Mit "Push" und "Pull" kannst Du die Positionen ändern.

Woher ich das weiß:Berufserfahrung – Entwicklung von Apps und Websites

tanjahatnefrage

Fragesteller

04.12.2020, 12:35

Dankeschön, habe mir das in der Doku gerade angeschaut und ausprobiert, hat so aber leider nicht funktioniert und ich weiß nicht was ich falsch mache. Kannst du mir evtl. sagen wie der Code, denn aussehen müsste?

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

05.12.2020, 08:07

Da Bootstrap für row das Flexbox-Layout verwendet, könntest du mit flex-direction die Reihenfolge der Boxen beeinflussen. Dies sollte natürlich nur für SmartPhone-Breiten gelten und nur für jedes zweite Element. Von seitens Bootstrap wird da aber vermutlich nichts diesbezüglich angeboten.

Du solltest also einen eigenen Selektor ergänzen. Dieser könnte so aussehen:

@media only screen and (max-width: 480px) {
  .teaser-list > .row:nth-child(even) {
    flex-direction: row-reverse;
  }
}

Ob die Breite des definierten Breakpoints so für dich passend ist, müsstest du selbst noch einmal prüfen.

Dem Container wird schlussendlich noch die Klasse teaser-list zugeordnet.

<div class="container teaser-list">

LeBonyt

04.12.2020, 12:04

Du kannst auch die Klasse col-xs-12 für Handy noch dem class attribut hinzufügen.

Woher ich das weiß:Berufserfahrung – Web Developer bei einem mittelständischen Portalbetreiber

tanjahatnefrage

Fragesteller

04.12.2020, 12:36

Ja genau, das war eh der Plan. Nur wenn ich dann alle meine Columns mit col-xs-12 untereinander habe auf dem Handy, wie bestimme ich dann, dass sich die Reihenfolge der Inhalte ändert?

Wie löse ich das Problem? Oben mein derzeitiger Stand - unten der Wunschzustand :)

HTML

<div id="main2">
   <div class="col1">
      <h3>Vivamus nec</h3>
      <img src="UE05/pic1.jpg" alt="spring flowers"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   </div>
   <div class="col2">
      <h3>Lorem ipsum</h3>
      <img src="UE05/pic1.jpg" alt="spring flowers"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
   </div>

Wie würdet ihr das mit CSS lösen?

...zur Frage

Bootstrap Layout?

Hallo,

arbeite momentan mit Bootstrap (Blazor) an einer Webseite.

Ich habe in meinem Container 3 Rows, wobei jede Row 3 Card Elemente hat.
Wenn ich nun aber mein Browserfenster kleiner mache verrutscht der Text:

Code:

<div class="container-fluid">


    <div class="row">
        <h3>Suche:</h3>
    </div>


    <div class="row p-2">
        <div class="row">
            <div class="row">
                <h2>Liste</h2>  
                <hr />
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Das Layout passt sich schon an, der innere Text aber nicht warum ?
Liegt es daran das ich ein <p> Tag verwende ?
Wie kann ich in Zukunft sowas verhindern ?

Sollte so aussehen:

...zur Frage

was bedeutet hart codiert oder Content type?

Hallo! Ich arbeite normalerweise als Grafikerin, da ich mich aber mit HTML und CSS auch ein bisschen auskenne, hat mich ein Kunde gebeten, ein von ihm gekauftes Template nur mit seinen Farben/Texten/Bildern anzupassen. So weit so gut, mit dem bin ich fertig. Jetzt wollte ich ihn fragen, ob er mir die Bilder von seinen Klienten schickt, dass ich sie auch gleich in die Seite einbetten kann.

Er will das lieber selber machen und hat mir nun eine Frage gestellt, wo ich echt nicht weiß, was das bedeuten könnte und auch im Internet finde ich nichts passendes:

"Sind die hardcodiert oder gibt’s für die Bilder einen ContentType?"

Zu den Bildern: Das ist eine Reihe von ausgegrauten Logos, die von einem dünnen grauen Rahmen umgeben sind - demnach hat jedes Logo einen einzelnen Container, alle Logos wiederum sind gemeinsam in einem einzelnen Container, also:

<div class="alle logos">
      <div class="col-lg-2">
        <img src="Template/img-temp/Xx74/img1.png">
      </div>
      <div class="col-lg-2">
        <img src="Template/img-temp/Xx74/img1.png">
      </div>
      <div class="col-lg-2">
        <img src="Template/img-temp/Xx74/img1.png">
      </div>
      <div class="col-lg-2">
        <img src="Template/img-temp/Xx74/img1.png">
      </div>
<div>

(soweit das für die Beantwortung der Frage relevant ist, ich habe echt keine Ahnung was er damit meint)

Danke schonmaaal!

...zur Frage

HTML / CSS: Warum lässt sich das Bild nicht nach links bewegen?

HTML:

<div class="mittecrew_png">
  <img src="mittecrew.png" height="105"; widht="1505";>
  <a href="#"></a>
</div>

CSS:

.mittecrewpng {
  margin-left: 100px;
}

...zur Frage

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zur Frage

Wie kann ich einstellen, dass die div-Boxen auf dem Handy untereinander dargestellt werden?

Guten Tag.

Mein Problem ist Folgendes: Auf dem PC werden die Boxen ganz normal und wie gewollt dargestellt, doch auf dem Handy wird alles in die Reihe gequetscht und man kann nichts erkennen. Wie kann ich nun einstellen, dass die div-Boxen untereinander dargestellt werden?

Quellcode:

<?php
  require('templates/header.php');
?>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Kampagnen</h3>
        </div>
        <br><br>
        <div class="row">
          <div class="col-xs-12">
            <div class="box box-container">
              <div class="row">
                <div class="col-xs-12">
                  <div class="box-first box-container">
                    <div class="row">
                      <div class="col-xs-1">
                        <div class="row">
                          <div class="col-xs">
                            <div class="box-nested" text-align="center">
                              <img src="templates/XXX.png"/>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <strong> XXX </strong>
                        </div>
                      </div>
                      <div class="col-xs-3">
                        <div class="box-nested">
                          <h4>
                            <span class="badge badge-pill badge-success">XXX: 1,10€</span>
                            <span class="badge badge-pill badge-secondary">XXX: 1,00€</span>
                          </h4>
                        </div>
                      </div>
                      <div class="col-xs-4">
                        <div class="box-nested">
                          <span>
                            <h4>
                              <font color="#400040">
                                <input name="text" id="myInput" id="text" width="100%;" ?>">
                                <button class="badge badge-pill badge-danger" onclick="myFunction()">Link Kopieren</button>
                              </h4>
                            </font>
                            <script>

                              function myFunction() {
                                var copyText = document.getElementById("myInput");
                                copyText.select();
                                document.execCommand("copy");
                              }
                            </script>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-body all-icons">
          <div class="row">
            <div class="wrap-table100">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php
  require('templates/footer.php');
?>

Das CSS, welches zugegebener Weise sehr unübersichtlich ist^^, lautet wie folgt:

https://pastebin.com/hHsGJhFE

...zur Frage

CSS-Bild-Text?

Hallo, wie lautet der Befehl, wenn ein Text und ein Bild auf der gleichen Linie stehen?

<div class="räderContainer">
                    <h3 class="h41">Text</h3>
                    <img class="rad" src="zahnrad.png">
                </div>

...zur Frage

CSS in neue Zeile springen?

Hallo,

ich habe ein html Dokument in folgender Form:

<html>
<head>
</head>
<body>
    <div class="Class1">
        <h1 class=user_caption>Caption</h1>
        <section class="name_liste">
            <div class="name blau">
                <h3>hallo</h3>
            </div>
            <div class="name gelb">
                <h3>hallo1</h3>
        
            </div>
            <div class="name grün">
                <h3>hallo2</h3>
                
            </div>
            <div class="name rot">
                <h3>hallo3</h3>
                
            </div>
            <div class="name pink">
                <h3>hallo4</h3>
                
            </div>
            <div class="name weiß">
                <h3>hallo5</h3>
                <div></div>
            </div>
        </section>
</body>
</html>

nur so grob. ich möchte dass blau gelb und grün in einer reihe angezeigt werden und dann darunter rot pink und weiß. Ich habe schon probiert bei grün ein flex-wrap zu machen, aber egal wo ich den wrap versuche, nirgends klappt es. Habe schon überlegt ob es daran liegt, dass die seite faktisch genug platz hat, alle diese container in einer zeile anzuzeigen aber es ist doch irgendwie möglich, diese 6 elemente in 2x3 aufzuteilen.

habe als basis in css zumindest: name_liste { display: inline-flex }

MfG

...zur Frage

wie in Bootstrap 5 vertikal zentrieren?

Der Container ist ganz oben was auch immer man probiert


<div class="container mx-auto">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-header">Header</div>
                    <div class="card-body">Content</div>
                    <div class="card-footer">Footer</div>
                </div>
            </div>
        <div class="col-sm-3"></div>
    </div>

...zur Frage

Icon größe ändern PHP und CSS Wordpress?

Hallo,

ich möchte gern die Icon Größe bearbeiten. Das icon ist hierbei "fa-phone"

Ich habe eine php Datei und ein Style.css sheet. Wie genau mache ich das? Ich bin eig. Java entwickler und habe mit CSS und PHP leider nichts am Hut.

Hier der php Code Abschnitt:

            <div class="col-lg-3 col-md-6 contact-details">
              <div class="row">
                <?php if( get_theme_mod( 'sayara_automotive_contact_head','' ) != '' || get_theme_mod( 'sayara_automotive_contact','' ) != '') { ?>
                  <div class="col-lg-2 col-md-2">
                    <i class="fa fa-phone"></i>
                  </div>
                  <div class="col-lg-10 col-md-10">
                    <p class="top-head"><?php echo esc_html( get_theme_mod('sayara_automotive_contact_head','' )); ?></p>
                    <p><?php echo esc_html( get_theme_mod('sayara_automotive_contact','' )); ?></p>
                  </div>
                <?php }?>
              </div>
            </div>

Wie genau hängt das Style.css mit dem zusammen?

LG
Niklas

...zur Frage

JavaScript: Wieso funktioniert mein Dropdownbutton nicht?

Der Dropdownbutton funktioniert nicht, obwohl Bootstrap verlinkt wurde. Was könnte der Grund sein?

HTML:

  <div class="col-sm-4 col-md-4 " onclick="sortFunction()" style="color: white;text-align: right;">
    <div class="dropdown">
      <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="color:white;">Sort By</button>
      <div class="dropdown-menu">
        <a class="dropdown-item" onclick="mostLikedSortFunction()" href="#">Most Liked</a>
        <a class="dropdown-item" onclick="mostLikedSortFunction()" href="#">Least Liked</a>
      </div>
    </div>
  </div>
</div>

JavaScript:

function mostLikedSortFunction() {
  movies.sort(function(a, b){return b.num_of_likes - a.num_of_likes});
  CreateMoviesFromJson();
}

function leastLikedsortFunction() {
  movies.sort(function(a, b){return a.num_of_likes - b.num_of_likes});
  CreateMoviesFromJson();
}

...zur Frage

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zur Frage

Hilfe für c# code mit HTML &CSS in Blazor?

Hallo, ich möchte eine WetterApp programmieren mit Blazor und sitze jetzt schon 4 Tage an dem Problem mit C#, da ich keine Ahnung habe wo ich anfangen soll und generell neu bin und nicht ganz vertraut bin. Ich habe die WetterApp mit JavaScript programmiert, allerdings soll ich C# verwenden und nicht JavaScript deshalb brauch ich eure Hilfe! Kann mir wer dabei helfen einen C# Code zu schreiben, welcher dasselbe macht wie mein javaScript-Code:

1. Ich möchte das mein "SeachrIcon-Button" aus einem HTML-Code als Suchbutton fungieren kann, womit ich die einzelnen Städte suchen kann, damit mir dabei dann die Wetterdaten angezeigt werden.

Ich möchte, dass dann die Bilder der zu den jeweiligen Wetter vorkommnissen angepasst werden, also die Wetter Daten sollen in der Console angezeigt werden aber nicht auf dem Display

Hier mein Html Code:

<body class="backgroundimage">


  <div class="card">
      <div class="search">
          <button><img src="/images/SuchIcon.png"></button>


              <input type="text" placeholder="Search" spellcheck="false" />
        
      
      </div>
  </div>
    
     
  <div class="weather"> 
      <div class="center margin-top">
      <img src="images/image1.png" width="200" height="200" style="opacity: 1" class="weather-icon" />
      </div>


     <div>
          <h1 class="temp">22°c</h1>
     </div>
      
      
      <div class="center">
          <h2 class="city center margin-top">New York</h2>
      </div>


          <hr class="hr1 line1" />

          <div id="imagesMain">
              <img src="/images/image1.png" width="75" height="75" class="imageline " />
              <img src="/images/image1.png" width="75" height="75" class="imageline " />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;" />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 12px; margin-right: -10px;" />
              <img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 2px; margin-right: -14px;"/>


          </div>

          <div>
           
              <p style="color:black;" class="line0 title margin-left ">Monday</p>
              <p style="color:black;" class="line0 title margin-left ">Tuesday</p>
              <p style="color:black;" class="line0 title margin-left ">Wednesday</p>
              <p style="color:black;" class="line0 title margin-left ">Thursday</p>
              <p style="color: black;" class="line0 title margin-left ">Friday</p>
             
           
          </div>

          <hr class="hr1 line" />

      <div class ="details">
          <div class="col">
              <img src="images/humidity.png"/>
              <div>
                  <p class="speed">Humidity</p>
                  <p class="humidity">50%</p>
                  
              </div>
          </div>
          <div class="col">
              <img src="images/wind.png" />
              <div>
                  <p class="speed">Wind Speed</p>
                  <p class="wind">15 km/h </p>
                 
              </div>

          </div>

      </div>
  </div>
  
   </body>

Im unteren Kommentar werd ich die restlichen Codes posten

...zur Frage

Wie kann man in Bootstrap 4 den Text in einer col nach rechts ausrichten?

Also nicht den ganzen container oder die ganze row

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen