<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class=""> <div class="container"> <h2 class="pb-3 pt-2 border-bottom mb-5">Vertical Left-Right Timeline</h2> <!--first section--> <div class="row align-items-center how-it-works d-flex"> <div class="col-2 text-center bottom d-inline-flex justify-content-center align-items-center"> <div class="circle font-weight-bold">放牛引子</div> </div> <div class="col-6"> <h5>Fully Responsive</h5> <p>我出生在湖北的一个农村，地名叫刘家咀。从卫星上往下看，其实还是很漂亮的。<p/> <p>我在这里度过了童年。大概从五、六岁开始，父亲便叫我和他一起去屋后的小山上放牛，刚开始就是觉得好玩，后来慢慢就变成了我一个人独自去放牛了。长大了才明白，那时候我也算是给父母亲分担了一点生活的负担。</p> <p>现在的许多人对于牛已经很陌生了。在我的那个年代，牛对于农村家庭来说是很重要的，那时候没有农业机器，牛，就是农村家庭的主要劳动力之一了，能够耕田、耙地、拉车等等。几乎家家户户都养有一头或者几头牛。我们家当时就是养有两头牛，有时候还会有一头小牛犊。</p> <p>有了牛就要有人去放牛，把牛赶到水草繁茂的地方去吃饱，牛才有劲干活。于是，放牛就成为家里一项重要的任务，家里有小孩的，任务就落到了孩子的头上。家里没有小孩的，大人就只好自己想办法了。</p> <p>我就是我们家里的放牛娃，也是我们老家那一带的少有的几个长年累月的放牛的放牛娃。放牛的生活，一直持续到我初中住读后才逐渐减少了，初中及高中的寒暑假，我仍然是帮助家里放牛。真正完全放下放牛的生活是在上大学后。</p> </div> </div> <!--path between 1-2--> <div class="row timeline"> <div class="col-2"> <div class="corner top-right"></div> </div> <div class="col-8"> <hr/> </div> <div class="col-2"> <div class="corner left-bottom"></div> </div> </div> <!--second section--> <div class="row align-items-center justify-content-end how-it-works d-flex"> <div class="col-6 text-right"> <h5>Using Bootstrap</h5> <p>为什么要有人放牛？许多人可能不理解，觉得把牛赶到山上，由得它去吃草，牛吃饱了，不就自己回家了吗？许多的小说里面也是这样写的。其实不然，牛吃草的时候需要人去管理的，这个过程就是放牛了。</p> <p>需要人放牛，在我看来，不外乎以下三个方面的原因。一是怕牛走丢了。把牛赶到山上，没有人看管，牛自己会吃草不错，但是它并不知道要往家里走的，基本上都会沿着山一直向前向前……最后它找不到回家的路了，你也找不到它了。你就等着去找牛吧，在我童年的记忆里面，同村的人找牛的事情不少见。</p> <p>第二个方面的原因就是怕牛吃庄稼。牛要吃草，越是鲜嫩的草它们越喜欢，但是它们并不知道这是草还是庄稼，只要遇到好吃的，一定会吃个肚皮朝天。牛吃了自己家的庄稼，肯定心疼啊。牛吃了别人家的庄稼，两家人肯定会因为这个事吵架，甚至打架的也常见。</p> <p>第三个方面的原因就是放牛场地的限制，因为屋后的小山上的草不够牛吃的，所以就要牵着牛到小河边、甚至是田埂上去寻找更鲜嫩的水草，以便能够让牛吃饱。这时候，没有人看管，牛可就要对庄稼下嘴了，毕竟秧苗或者麦苗等庄稼的长势，肯定比水草要嫩、要好吃。</p> <p>所以，放牛需要人，而且，需要放牛的人有责任心。我小时候在山上放牛的时候，偶尔也会因为玩忘记了，也有找不到牛的时候，着急的哭，漫山遍野的跑着找牛，的确不是个滋味。而且牛一旦吃了庄稼，被告到父母亲那里，也免不得要挨揍。</p> </div> <div class="col-2 text-center full d-inline-flex justify-content-center align-items-center"> <div class="circle font-weight-bold">为什么需要</div> </div> </div> <!--path between 2-3--> <div class="row timeline"> <div class="col-2"> <div class="corner right-bottom"></div> </div> <div class="col-8"> <hr/> </div> <div class="col-2"> <div class="corner top-left"></div> </div> </div> <!--third section--> <div class="row align-items-center how-it-works d-flex"> <div class="col-2 text-center top d-inline-flex justify-content-center align-items-center"> <div class="circle font-weight-bold">去哪儿</div> </div> <div class="col-6"> <h5>Now with Pug and Sass</h5> <p>田野够大，青草也足够茂盛鲜嫩，但菜园众多，难免令牛羊垂涎，我曾多次因为躲在他人家看电视，导致大黑牛将人家整个菜园子的菜吃得一干二净，为此我接受了相当严厉而终身难忘的批评教育。在火烧云美如火焰的傍晚，我跟在牛和父亲身后，胆战心惊地走着，一整块菜地的菜对那时的农人来说，是几个月精心的侍弄和培养，除了得供一家人的餐桌，多余还得拿去卖，却因为我的偷懒和疏忽被牛啃个精光。那种惭愧和害怕简直毕生难忘。</p> </div> </div> </div> </div>

.circle { padding: 13px 20px; border-radius: 50%; background-color: #ED8D8D; color: #fff; max-height: 80px; z-index: 2; } .how-it-works.row .col-2 { align-self: stretch; } .how-it-works.row .col-2::after { content: ""; position: absolute; border-left: 3px solid #ED8D8D; z-index: 1; } .how-it-works.row .col-2.bottom::after { height: 50%; left: 50%; top: 50%; } .how-it-works.row .col-2.full::after { height: 100%; left: calc(50% - 3px); } .how-it-works.row .col-2.top::after { height: 50%; left: 50%; top: 0; } .timeline div { padding: 0; height: 40px; } .timeline hr { border-top: 3px solid #ED8D8D; margin: 0; top: 17px; position: relative; } .timeline .col-2 { display: flex; overflow: hidden; } .timeline .corner { border: 3px solid #ED8D8D; width: 100%; position: relative; border-radius: 15px; } .timeline .top-right { left: 50%; top: -50%; } .timeline .left-bottom { left: -50%; top: calc(50% - 3px); } .timeline .top-left { left: -50%; top: -50%; } .timeline .right-bottom { left: 50%; top: calc(50% - 3px); }