如何并排引导图像和文本，但是当屏幕较小时，文本会越过图像？

Question

Basically, I want half the screen to be my image and the other half to have my text. But if the screen is very small, I want the text to go over the image and the image and text shrink. So far I have the big screen working, but when I go into small screen the text is still huge (making it go off the screen) and is still to the right of the image.

.html:

<div class="container-fluid"> 
    <div class="row">
        <div class="col-xs-9 col-md-6">
            <img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819">
        </div>
        <div class="col-xs-3 col-md-6">
            <div class="first"> 
                NAME HERE
            </div>
            <div class="second"> 
                DEVELOPER
            </div>
        </div>
    </div>
</div>

.css

.first{
    font-family: Cinzel;
    color: black;
    font-size: 45px;
    font-weight: normal;
}

.second{
    font-family: Cinzel;
    color: black;
    font-size: 20px;
    font-weight: normal;
}

Answer 1

You could use media queries to get text over the image. Override position attribute as it is shown here How to position text over an image in css

Also, there is no need to use col-xs-9 and col-xs-3. You can use col-xs-12. Atleast col-xs-3 is not needed (col-xs-9 is a choice).

Something similar to this (not tested):

<div class="container-fluid cntr"> 
    <div class="row">
        <div class="col-xs-12 col-md-6 image1">
            <img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819">
        </div>
        <div class="col-xs-12 col-md-6 text1">
            <div class="first"> 
                NAME HERE
            </div>
            <div class="second"> 
                DEVELOPER
            </div>
        </div>
    </div>
</div>

@media screen and (max-width: 767px) {
.cntr {
  position: relative;
}
.image1 {
  position: absolute;
  left: 0;
  top: 0;
}
.text1 {
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
}
}

Answer 2

It's tricky to answer as you haven't specified what you mean by "too small" or how big your current image is. The smallest device is probably an old iPhone (320px). The following works for 320px but not below as the margin-left here is in pixels (percentage would be ideal). There is a jsbin here

 .first { font-family: Cinzel; color: black; font-size: 45px; font-weight: normal; } .second { font-family: Cinzel; color: black; font-size: 20px; font-weight: normal; } @media screen and (max-width:320px) { .first { font-size: 16px; text-align: center; vertical-align: middle; left: 0!important; margin-left: -300px; color: white; } .second { font-size: 10px; text-align: center; vertical-align: middle; margin-left: -300px; color: white; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-xs-9 col-md-6"> <img class="img-responsive" src="http://s3.amazonaws.com/digitaltrends-uploads-prod/2014/06/Brain.jpg" alt="Brain Image" width="960" height="819"> </div> <div class="col-xs-3 col-md-6"> <div class="first"> NAME HERE </div> <div class="second"> DEVELOPER </div> </div> </div> </div>