Html 使引导div中的文本水平环绕并位于相邻列的下方

在我的Wordpress页面上，我有以下代码：

<div class="row">

    <div class="col-md-6">
        <a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
        <img class="img-responsive" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " /></a>
    </div>

    <div class="col-md-6">
        <h1 class="text-center">Vision</h1>
        <span style="font-size: 12.0pt;">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</span>
        <h1 class="text-center">Mission</h1>
        <span style="font-size: 12.0pt;">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</span>

        <ul>
            <li><span style="font-size: 12.0pt;">Building, managing and supporting cross-sector coalitions</span></li>
            <li><span style="font-size: 12.0pt;">Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</span></li>
            <li><span style="font-size: 12.0pt;">Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</span></li>
            <li><span style="font-size: 12.0pt;">Advocating and shaping policy to support improvements of systems</span></li>
        </ul>
    </div>

</div><!--end div class="row"-->

视野
我们的愿景是，在这个世界上，来自不同部门的组织围绕着共同的目标共同努力，改造能够带来繁荣社区的系统。
使命
FNC是一个以问题为中心、以影响力为驱动力的组织，其使命是通过跨部门协调和努力，促进大规模社会变革，从而改善整个系统。FNC的重点是通过在以社区为基础的过程中有效实施这些协调努力，建设繁荣的社区。FNC通过以下方式提高整个领域的能力和协调：

建立、管理和支持跨部门联盟
建立和支持实践社区，其中数据证明有价值，为所有利益相关者提供信息并推动他们不断学习
协调跨部门研究，以衡量集体影响并确定最佳实践（即系统层面的影响）
倡导和制定支持系统改进的政策

你可以看到它的样子

如您所见，文本在wordpress页面模板区域内保持50%的右侧浮动。我想文本开始占据100%的可用面积，一旦它击中了一个新的行，下面的第一个图片列的左侧

关于我希望它看起来如何的示例，请查看我们的，如果您有高纵横比，请放大

---

我知道以前也有人问过类似的问题，但在使用Bootstrap框架时，我找不到答案。

Bootstrap与在表中设计没有太大区别。我的意思是，他们甚至称之为行和列。这是20世纪90年代使用CSS的网页设计。（我只是半开玩笑）

如果您想让该图像满足您的要求，您应该组合引导列（只需使用一个col-md-12）并使用CSS将图像向左浮动

---

你的另一个选择是决定你想要的文本总是放在图像的一边，以及你想要在它下面放什么，然后用一个新的col-md-12将该文本移动到一个新行。

引导与在表中设计没有太大的不同。我的意思是，他们甚至称之为行和列。这是20世纪90年代使用CSS的网页设计。（我只是半开玩笑）

如果您想让该图像满足您的要求，您应该组合引导列（只需使用一个col-md-12）并使用CSS将图像向左浮动

---

你的另一个选择是决定你想要的文本总是放在图像的一边，以及你想要在它下面放什么，然后用一个新的col-md-12将该文本移动到一个新行。

引导与在表中设计没有太大的不同。我的意思是，他们甚至称之为行和列。这是20世纪90年代使用CSS的网页设计。（我只是半开玩笑）

如果您想让该图像满足您的要求，您应该组合引导列（只需使用一个col-md-12）并使用CSS将图像向左浮动

---

你的另一个选择是决定你想要的文本总是放在图像的一边，以及你想要在它下面放什么，然后用一个新的col-md-12将该文本移动到一个新行。

引导与在表中设计没有太大的不同。我的意思是，他们甚至称之为行和列。这是20世纪90年代使用CSS的网页设计。（我只是半开玩笑）

如果您想让该图像满足您的要求，您应该组合引导列（只需使用一个col-md-12）并使用CSS将图像向左浮动

您的另一个选择是决定您想要的文本总是位于图像的一侧，以及您想要的文本位于图像的下方，并使用新的col-md-12将该文本移动到新行。

，这是关于引导-将列环绕在较大的列上

这不是特定于“引导”的问题。bootstrap所做的就是使用一些带有长样式表的类名

不相关-我也会删除这些内联样式。

，它是关于引导-围绕较大的列包装列

这不是特定于“引导”的问题。bootstrap所做的就是使用一些带有长样式表的类名

不相关-我也会删除这些内联样式。

，它是关于引导-围绕较大的列包装列

这不是特定于“引导”的问题。bootstrap所做的就是使用一些带有长样式表的类名

不相关-我也会删除这些内联样式。

，它是关于引导-围绕较大的列包装列

这不是特定于“引导”的问题。bootstrap所做的就是使用一些带有长样式表的类名

---

不相关-我也会删除这些内联样式。

多亏了@BenFried和@Rkhayat的提示，我能够想出一些有效的代码

<div class="row">

    <div class="col-md-12">

        <a href="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg">
                <img class="img-responsive" style="float: left; padding-right: 1em; padding-bottom: 1em;" src="http://zacharyhughes.com/wp-content/uploads/2015/07/1.jpeg" alt="Henry and Adam during FNC's " width="50%" />
        </a>

        <h1 class="text-center">Vision</h1>
        <p class="text-justify">Our vision is a world where organizations from different sectors work together around common goals to transform systems that result in thriving communities.</p>

        <h1 class="text-center">Mission</h1>
        <p class="text-justify">FNC is an issue-focused, impact-driven organization whose mission is to be the catalyst for large-scale social change through cross-sector coordination and efforts that result in improvements of entire systems. FNC’s focus is to build thriving communities through effective implementation of these coordinated efforts in community-based processes. FNC increases the capacity and coordination of an entire field through:</p>

        <ul>
            <li>Building, managing and supporting cross-sector coalitions</li>
            <li>Building and supporting communities of practice where data proves value and informs and drives continual learning among all stakeholders</li>
            <li>Coordinating cross-sector research to measure collective impact and determine best practices (i.e. impact on a systems level)</li>
            <li>Advocating and shaping policy to support improvements of systems</li>
        </ul>

    </div> <!-- end <div class="col-md-12"> -->

</div> <!-- end <div class="row"> -->

视野
我们的愿景是一个来自不同行业的组织围绕共同目标共同努力的世界，以改变导致社区繁荣的系统
使命
FNC是一个以问题为中心、以影响力为驱动力的组织，其使命是通过跨部门的协调和努力来促进大规模社会变革，从而改善整个系统。FNC的重点是通过在以社区为基础的过程中有效实施这些协调努力，建设繁荣的社区。FNC通过以下方式提高整个领域的能力和协调：

建立、管理和支持跨部门联盟
建立和支持实践社区，其中数据证明有价值，为所有利益相关者提供信息并推动他们不断学习
协调跨部门研究