HTML/CSS Responsive Grid

Question

Ich bin ziemlich neu im Responsive Grid-Konzept in HTML/CSS. Ich versuche mit diesem Konzept eine Webseite zu gestalten. Für den Header habe ich ein Bild und etwas Text.

Nun zu meiner Frage, ich möchte die Webseite implementieren, um die erste und letzte Spalte der Spannweite zu verwenden. Auf einem Bildschirm mit normaler Auflösung sollte das Bild also ganz links und der Text ganz rechts sein.

Auf einem kleineren Bildschirm, wo nur 2 Spalten passen, möchte ich sie nebeneinander, und auf einem noch kleineren Bildschirm möchte ich sie unter einander.

Irgendwelche Vorschläge?

EDIT:

div.picture{ 
    background-color: #4A96AD; 
    float: left; 
    height:100%; 
    border-right:3px solid #7D1935; 
} 

/*CSS FILE*/ 
div.header-text{ 
    font-weight:bold; 
    text-align:right; 
} 

Answer 1

mit Ihrem Code hier auf SO, arbeitet floating fein:

https://jsfiddle.net/zkzjsgxr/1/

div.picture{ 
    background-color: #4A96AD; 
    float: left; 
    height:100%; 
    border-right:3px solid #7D1935; 
} 

/*CSS FILE*/ 
div.header-text{ 
    font-weight:bold; 
    float:right; 
} 

Answer 2

mit Arbeiten 3 Beispiele simulieren Größen:

div.picture{ 
 
    background-color: #4A96AD; 
 
    float: left; 
 
    height:100%; 
 
    border-right:3px solid #7D1935; 
 
    width: 40px; 
 
} 
 

 
div.header-text{ 
 
    font-weight:bold; 
 
    text-align:right; 
 
    width: 40px; 
 
} 
 

 
.float-right{ 
 
    float: right; 
 
} 
 

 
.float-left{ 
 
    float: left; 
 
} 
 

 
div.section{ 
 
clear: both; 
 
    } 
 

 
/* don't copy this css, just examples*/ 
 
div.section:nth-of-type(1){ 
 
width: 400px; 
 
    margin: 0 auto; 
 
    } 
 
div.section:nth-of-type(2){ 
 
width: 90px; 
 
    margin: 0 auto; 
 
    } 
 
div.section:nth-of-type(3){ 
 
width: 50px; 
 
    margin: 0 auto; 
 
    }

<header class="section group"> 
 
    <div class="section group"> 
 
     <div class="picture col span_1_of_4 float-left"> 
 
      div1 
 
     </div> 
 
     <div class="header-text col span_1_of_4 float-right"> 
 
      div2 
 
     </div> 
 
    </div> 
 
    <div class="section group"> 
 
     <div class="picture col span_1_of_4 float-left"> 
 
      div1 
 
     </div> 
 
     <div class="header-text col span_1_of_4 float-right"> 
 
      div2 
 
     </div> 
 
    </div> 
 
    <div class="section group"> 
 
     <div class="picture col span_1_of_4 float-left"> 
 
      div1 
 
     </div> 
 
     <div class="header-text col span_1_of_4 float-right"> 
 
      div2 
 
     </div> 
 
    </div> 
 
</header>

Für die kleinste, ich würde mediaqueries verwenden, wenn Sie den Effekt nicht gefällt .