Confusion with scaling down text in Bootstrap

Question

So I'd like to have one column of social media icons against the left side of the browser window (with the icons stacked) and then text that takes up 5 columns with the rest of the columns empty. This works fine when the browser window is large, but when I start making it smaller, the text then stretches all the way across instead of being constrained to the 5 columns and it moves below the icons. I would like the icon column to always take up one column next to the text. What am I missing to do this? I know I need to do col-sm-x , just can't make it work. Thanks.

HTML:

<div class="container-fluid">   
    <div class="row">
        <section class="social-media col-md-1">
                <a href="https://www.instagram.com/neon.honey/" target="_blank">
                    <img class="media-object" src="../bootstrap/images/instagram.png" alt="Instagram">
                </a>            
                <a href="https://twitter.com/deephoney/" target="_blank">
                    <img class="media-object" src="../bootstrap/images/twitter.png" alt="Twitter">
                </a>
                <a href="https://www.pinterest.com/electrodextrose/" target="_blank">
                    <img class="media-object" src="../bootstrap/images/pinterest.png" alt="Pinterest" />
                </a>
                <a href="mailto:blahblahblah@gmail.com" target="_top">
                    <img class="media-object" src="../bootstrap/images/email.png" alt="Email me!" />            
                </a>
        </section>
        <section class="hello col-md-5 col-sm-">
            <h1>hello!</h1> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, 
            cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit 
            commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
        </section>
    </div>
</div>

CSS:

h1 {
    color: rgb(244, 195, 197);
    font-family: 'Cookie', sans-serif;
    font-weight: 400;
    text-shadow: 2px 2px 1px rgba(192,192,192,0.1);
    text-transform: lowercase;
    font-size: 70px;
    margin-bottom: -5px;
    text-align: left;
    }

h3 {
    color: rgb(244, 195, 197);
    text-transform: uppercase;
    }

.bgimage {
    background-image: url('../images/bgimage.png');
    background-position: center center;
    background-size: cover;
    height: 450px;
    background-color: rgb(34, 39, 42);
    padding-top: 25px;
}

h4 {
    margin-top: 1px;
    text-align: left;
    font-size: 15px;
    }

.social-media {
  padding-left: 15px;
  padding-top: 30px;
}

.social-media img {
    padding: 5px;
}

Answer 1

Make sure you use col-xs when you want to preserve column ratio even in small screens. When you only specify columns in col-md (fe col-md-4 ), bootstrap tells browser to keep 4 columns from the largest down to md screen size. After that (in sm and xs screen sizes) it will take 12.

So in your example:

<div class="container-fluid">   
    <div class="row">
        <section class="social-media col-xs-1">
        ...
        </section>
        <section class="hello col-xs-5">

Answer 2

you can remove the col-md-1 and deal with the box your self .

I changed this part of your code

    .social-media {
        float: left;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 30px;
    }

    .social-media a {
        display: block;
    }
    .hello {
        margin-left: 30px;
    }

and the results http://www.bootply.com/fsRThkzAV9