How to make image and text responsive next to each other on a background?

Hello Everyone,

I am completely new to bootstrap, have been working with it for like a week. I am currently working on a Christmas gift to my girlfriend and I am really stuck.

I want to place a picture and a short text (next to each other) on a background.
I want it to look something like this:

On mobile, something like this: png (delete space before png)

Here is my code:


.section_1 {
  position: relative;
  color: #fff;
  background-color: #bdbdbd;
.picture {
  content: url(;
  width: 50%;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
.text {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 20px;


<link href="//" rel="stylesheet" />
<section class="section_1">
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="picture">
        <div class="span2">
        <div class="span10">
          <div class="text">
           <p>Lorem ipsum</p>

I tried everything but it never really worked and I wasted like 2 days on this issue. I really can’t make it alone! PLEASE HELP!!!


<!DOCTYPE html>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>

<p>Lorem ipsum</p>


body {
background: url(


p {
font-size: 30px;
margin-top: 300px;
margin-left: 400px;
font-family: helvetica;

it’s a very basic version of it, but I hope you can understand what happened there.

How to post code in this forum.