Wrap part of the title in a <span></span> or any other inline/inline-block element inside of the <h4></h4>. Then give the span a class of hidden-xs.

Hi Bill, I'll apologize in advance. I am typing on my phone during my daily commute, and don't really have access to the workstation to test out my suggestions. However, I did just finish this course myself and bootstrap is still fresh on my mind. If I understand correctly you are wanting to have the label for the time of the speech to wrap around to the next line on xs screens. I can think of a couple of ways of dealing with the situation. Again these are just off the top of my head without having really tested them out. Bootstrap will vertically stack elements that are siblings within a row container.. however, for styling reasons Gil repositioned the span element with the .label class so that it is a child of the h4 element. I believe that if you simply make the H4 and span elements siblings by removing the span from H4 node and placing it back into the list item element should get it to do what you want. If you do it this way, you will also need to add a CSS rule targeting the span to adjust the text size. (It's possible that, if you check the Bootstrap docs for a helper class relating to 'overflow' or 'wrap', there might be some work around there. But I can't say for sure.) Personally, I would take it a step further by adjusting the list item's layout for the xs screen size. For instance, I might add classes so that the H4 and span switch positions on xs screens. I hope that you're able to discover a solution from these suggestions. I'm sorry I don't have a solution that is tried-and-true on hand at this point in time. Let me know how it works out and good luck!

<h4> <span class="hidden-xs">Keynote: </span>Internet of Things </h4>