align 2 Elemente links und rechts Bootstrap Ausgabe

Question

Iam versucht, diesen Positionierungseffekt zu erreichen, der auf dem Bild ist. Text von links mit etwas Polsterung unten und oben für den Text und Position absolut für das Bild auf der rechten Seite, aber ich kann es nicht richtig erreichen. Irgendwelche Vorschläge ?

Ich werde meinen Code hier

.luma-founders { position: relative; padding: 30px 0; background: #8bc541; } 
 
.luma-founders h3 { font-family: "Questrial", sans-serif; font-size: 36px; color: #fff; margin: 79px 0 40px 0; padding: 0 11px; } 
 
.luma-founders p { font-family: "Raleway-Regular", sans-serif; font-size: 16px; line-height: 30px; color: #fff; padding: 0 11px; } 
 
.luma-crew { position: absolute; left: 50%; top: 0; right: 0; bottom: 0; } 
 
.luma-crew img { min-width: 100%; min-height: 100%; height: auto; width: auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="luma-founders"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <h3>Who is Luma Comfort</h3> 
 
      <p>We at Luma Comfort want the best for you. We pride ourselves as innovators in design and functionality, to ensure that you have the best quality products to choose from.</p> 
 
      <p>Our philosophy is that comfort doesn't just come from how well our products work, but how good they make you feel to look at them in your home or office. Luma Comfort knows the importance of quality products that look beautiful too.</p> 
 
     </div> 
 
     <!-- col-md-6 --> 
 
     <div class="luma-crew"> 
 
      <img src="https://s18.postimg.org/p5pxb0r95/founders.jpg" width="783" height="510" title="someText" alt="someText"> 
 
     </div> 
 
     </div> 
 
     <!-- row --> 
 
    </div> 
 
    <!-- container -->

Answer 1

fügte etwas Spielraum für .luma-crew img teilen (dh margin-left: 100%;)

.luma-founders { position: relative; padding: 30px 0; background: #8bc541; } 
 
.luma-founders h3 { font-family: "Questrial", sans-serif; font-size: 36px; color: #fff; margin: 79px 0 40px 0; padding: 0 11px; } 
 
.luma-founders p { font-family: "Raleway-Regular", sans-serif; font-size: 16px; line-height: 30px; color: #fff; padding: 0 11px; } 
 
.luma-crew { position: absolute; left: 50%; top: 0; right: 0; bottom: 0; } 
 
.luma-crew img { min-width: 100%; min-height: 100%; /*height: auto; width: auto;*/ margin-left: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="luma-founders"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <h3>Who is Luma Comfort</h3> 
 
      <p>We at Luma Comfort want the best for you. We pride ourselves as innovators in design and functionality, to ensure that you have the best quality products to choose from.</p> 
 
      <p>Our philosophy is that comfort doesn't just come from how well our products work, but how good they make you feel to look at them in your home or office. Luma Comfort knows the importance of quality products that look beautiful too.</p> 
 
     </div> 
 
     <!-- col-md-6 --> 
 
     <div class="luma-crew"> 
 
      <img src="https://s18.postimg.org/p5pxb0r95/founders.jpg" width="783" height="510" title="someText" alt="someText"> 
 
     </div> 
 
     </div> 
 
     <!-- row --> 
 
    </div> 
 
    <!-- container -->