Using Boostrap to center image & Text on Smaller devices - html

Question

New to bootstrap and trying to stack the text below the image on mobile devices of 6" aand less. Working well on 7" and more screen devices.
On bigger screens like tablets and desktops the image and the text are on one row appearing as expected.
But on smaller screens I want the the text to stack below the image and both should be centered; was not getting the desired result cos part of the image and text are cut of when stacked. I want the image and the text to be stacked and no part cut off. That is the problem I want solved.
Here is the code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-6 ">
<img class="aligncenter size-full wp-image-99991388" src="http://francmasones.net/wp-content/uploads/2016/10/sm.png" alt="sm" width="398" height="376" /></div>
<div class="col-xs-12 col-sm-6 col-lg-6">
<p style="text-align: left;"><span style="font-size: 17pt; font-weight: 400;"><strong>Etiam porta urna est, id bibendum nisl hendrerit quis. Fusce vel urna ut neque posuere blandit.!</strong></span></p>
<div class="span6">
<p style="text-align: justify;"><span style="font-size: 15pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar, lacus eu sodales tempor, augue tortor finibus nisi, ut vulputate leo metus eget erat. Suspendisse viverra, urna sed sodales bibendum, lorem urna ullamcorper quam, vel bibendum elit mi feugiat risus. Aliquam aliquet, eros nec porttitor bibendum, justo ex facilisis mauris, vel rhoncus purus eros sed nisl. Nulla faucibus posuere varius. Maecenas sed nisi ullamcorper, bibendum ligula id, ornare quam. Donec fermentum pretium lorem et gravida. Nullam placerat augue sed arcu iaculis vehicula. Pellentesque ultrices, justo eget ultrices vestibulum, ligula risus porta nisl, quis imperdiet ante diam sed dui. Morbi ante lacus, pellentesque ut turpis ut, pulvinar pretium nulla.</span></p>
</div>
</div>
</div>
</div>
You insights and kind responses will be appreciated

Answer 1

I don't understand your question clearly. Any How as per my understanding try this code below the row class.
<div class="center-block"> <div>

Answer 2

Try this:
#media (max-width: 768px) {
.col-xs-12 {
text-align: center
}
}

Answer 3

You can write a Media Query for this according to Bootstrap Grid Media Queries breakpoints. Like:
/* For Mobile Devices (equivalent to col-xs-*) */
#media screen and (max-width: 767px) {
.img-holder img {
margin: 0 auto 15px; /* Centers the image */
}
.text-holder .title {
text-align: center; /* Centers the content */
}
.text-holder .description {
text-align: center; /* Centers the content */
}
}
Have a look at the snippet below:
.text-holder .title {
text-align: left;
}
.text-holder .description {
text-align: justify;
}
/* For Mobile Devices (equivalent to col-xs-*) */
#media screen and (max-width: 767px) {
.img-holder img {
margin: 0 auto 15px;
}
.text-holder .title {
text-align: center;
}
.text-holder .description {
text-align: center;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-6 img-holder">
<img class="img-responsive aligncenter size-full wp-image-99991388" src="http://francmasones.net/wp-content/uploads/2016/10/sm.png" alt="sm" width="398" height="376" /></div>
<div class="col-xs-12 col-sm-6 col-lg-6 text-holder">
<p class="title"><span style="font-size: 17pt; font-weight: 400;"><strong>Etiam porta urna est, id bibendum nisl hendrerit quis. Fusce vel urna ut neque posuere blandit.!</strong></span></p>
<div class="span6">
<p class="description"><span style="font-size: 15pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar, lacus eu sodales tempor, augue tortor finibus nisi, ut vulputate leo metus eget erat. Suspendisse viverra, urna sed sodales bibendum, lorem urna ullamcorper quam, vel bibendum elit mi feugiat risus. Aliquam aliquet, eros nec porttitor bibendum, justo ex facilisis mauris, vel rhoncus purus eros sed nisl. Nulla faucibus posuere varius. Maecenas sed nisi ullamcorper, bibendum ligula id, ornare quam. Donec fermentum pretium lorem et gravida. Nullam placerat augue sed arcu iaculis vehicula. Pellentesque ultrices, justo eget ultrices vestibulum, ligula risus porta nisl, quis imperdiet ante diam sed dui. Morbi ante lacus, pellentesque ut turpis ut, pulvinar pretium nulla.</span></p>
</div>
</div>
</div>
</div>
Also avoid giving inline styles. It's a bad practice.
Hope this helps!